AngularJS $animate.addClass不触发addClass函数

Question

我有几个例子，我在执行动画的角度。

它们几乎是相同的--但其中一种起作用，另一种不起作用--我不知道第二种不起作用。

(如下所示)是工作的指令：-它本质上是在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);  
        }
    }

});

以下是不工作的指令-控制台日志记录显示它全部工作，直到console.log('performing animation'); -告诉我这个函数只是没有被触发，我不知道为什么.

HTML只是简单的

<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 });
        }
    }

});

在调用$rootScope.showMask()之后查看HTML时，我可以看到掩码现在有了类

<mask class="showmask"></mask>

有人知道我哪里出了问题吗？

Answer 1

问题在于您测试showMask()的方式。

如果不是

$rootScope.showMask()

您可以使用

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

(并添加适当的依赖项。)然后'performing animation'也会被记录；如果我包含了tweenmax，它可能已经做了一些事情。

http://jsfiddle.net/zQfxq/

其他人可能需要填写更详细的细节，说明为什么此时调用$rootScope.showMask()不像您所期望的那样工作，但我认为，在测试中等待所有东西编译和链接是有意义的；这就是$timeout所做的。

Answer 2

你试过使用元素变量吗？

element.addCLass('showmask')