AngularJS $animate.addClass is not firing the addClass function

Question

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?

Answer 1

The trouble is the way you're testing the showMask().

If instead of

$rootScope.showMask()

you use

$timeout(function(){$rootScope.showMask()});

(And add the appropriate dependencies.) Then 'performing animation' is logged as well; and presumably if I'd included tweenmax it'd have done something.

http://jsfiddle.net/zQfxq/

Someone else may have to fill in the finer details of why calling $rootScope.showMask() at that point doesn't work as you expect, but I think it makes sense to wait with testing till everything is compiled and linked; and that's what the $timeout does.

Answer 2

did you try to use element variable for that?

element.addCLass('showmask')