javascript - 除非我使用 $timeout，否则指令中的 AngularJs 动画不起作用

Question

我不明白为什么下面的动画不能正常工作:

app.directive('openMenu', ['$animate', '$timeout', function($animate, $timeout) {
    return {
        link: function(scope, elem) {
            elem.bind('click', function() {

                if(elem.is(':animated'))
                    return;

                $timeout(function() {
                    $animate.addClass(elem, 'see');
                }, 0);

            });
        }
    }
}]);

在这个动画中根本不起作用(也没有添加类):

app.directive('openMenu', ['$animate', function($animate) {
    return {
        link: function(scope, elem) {
            elem.bind('click', function() {

                if(elem.is(':animated'))
                    return;

                $animate.addClass(elem, 'see');

            });
        }
    }
}]);

在第二个代码片段中，我只删除了 $timeout，它是 0，我尝试使用自激发函数来检查 - 动画仅在我使用超时时起作用。谁能解释一下为什么？

middle {
    margin-left: 0;
}
middle.see {
    margin-left: 270px;
}
.middle.see-add {
    -webkit-transition: margin-left 300ms;
    -moz-transition: margin-left 300ms;
    -ms-transition: margin-left 300ms;
    -o-transition: margin-left 300ms;
    transition: margin-left 300ms;
    margin-left: 0;
}
.middle.see-add.see-add-active {
    margin-left: 270px;
}

这是标记:

<div class="middle" open-menu></div>

Answer 1

由于您的指令使用 jQuery 并且 jQuery 修改了 DOM，因此我们需要将其告知 Angular。为此，您需要执行 $scope.$apply 但您会遇到错误:“digest already in progress”。

在 $timeout 内执行的代码保证您的代码将在下一个摘要周期安全地执行。

0 是默认值，您甚至不需要指定它。你可以简单地写:

 $timeout(function() {
    $animate.addClass(elem, 'see');
 });

$timeout 服务只是一个方便的服务，等同于:

var timeout = setInterval(function(){
    // do stuff
    $scope.$apply();
}, 0); 

您可以在官方文档中找到有关摘要机制的大量信息:https://docs.angularjs.org/error/$rootScope/inprog