javascript - AngularJS $animate.addClass 没有触发 addClass 函数

Question

我有几个使用 Angular 执行动画的实例。

它们几乎相同 - 但一个有效，另一个无效 - 我无法确定第二个无效。

以下是有效的指令: - 它本质上为 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()});

(并添加适当的依赖项。)然后也会记录'执行动画'；想必如果我加入了 tweenmax 它就会有所作为。

http://jsfiddle.net/zQfxq/

其他人可能需要填写更详细的信息，说明为什么此时调用 $rootScope.showMask() 无法按您的预期工作，但我认为等待测试是有意义的直到一切都被编译和链接；这就是 $timeout 的作用。