I have a couple of instances where I am performing animation with Angular.
They are both almost identical - yet one works,and the other doesn't - I
can't figure out by the second one doesn't.
*The following, is the directive that DOES work:* - It essentially animates
a bunch of child elements within the element
dwApp.directive('introText', ['$animate', '$rootScope', function ($animate,
$rootScope) {
return {
restrict: 'A',
scope: {
},
link: function (scope, element, attrs) {
scope.animationStarted = false;
$rootScope.$on('element-in-view', function (event, parent) {
if (!scope.animationStarted) {
scope.animationStarted = true;
$animate.addClass(element, 'slidein');
};
});
}
}
}]);
dwApp.animation('.slidein', function () {
return {
addClass: function (element, className) {
TweenMax.staggerTo(element.children(), 2.8, { opacity: 0.85, left:
'5%', ease: Circ.easeOut }, 3);
}
}
});
*The following, is the directive that does NOT work* - the console logging
shows that it all works, right up to console.log('performing animation'); -
telling me that the function is just not being fired, and i have no idea
why...
*HTML is simply*
<mask></mask>
dwApp.directive('mask', ['$animate', '$rootScope', function ($animate,
$rootScope) {
return {
restrict: 'E',
link: function (scope, element, attrs) {
console.log('mask directive')
$rootScope.showMask = function () {
console.log('showMask called - add class')
$animate.addClass(element, 'showmask');
};
// test
$rootScope.showMask();
}
}
}]);
dwApp.animation('.showmask', function () {
console.log('in showmask animation service');
return {
addClass: function (element, className) {
console.log('performing animation');
TweenMax.to(element, 1, { opacity: 1 });
}
}
});
When viewing the HTML source after $rootScope.showMask() has been called I
can see that the mask now has the class
<mask class="showmask"></mask>
Does anybody have any idea where i am going wrong?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
