AngularJs在指令动画不起作用，除非我用$超时

本文介绍了AngularJs在指令动画不起作用，除非我用$超时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我不明白，为什么下面的动画不会因为工作它应该：

app.directive（'openMenu'，['$动画，$超时'，函数（$动画，$超时）{    返回{        链接：功能（范围，ELEM）{            elem.bind（'点击'，功能（）{                如果（elem.is（'：动画'））                    返回;                $超时（函数（）{                    $ animate.addClass（ELEM，'看'）;                }，0）;            }）;        }    }}]）;

而在这其中的动画没有在所有的工作（和类不加任何）：

app.directive（'openMenu'，['$动画'，函数（$动画）{    返回{        链接：功能（范围，ELEM）{            elem.bind（'点击'，功能（）{                如果（elem.is（'：动画'））                    返回;                $ animate.addClass（ELEM，'看'）;            }）;        }    }}]）;

在第二code段，我只删除 $超时，这是0，我试图用自我射击功能检查 - 动画作品只有当我我使用超时。有人可以解释我为什么？

中部{    保证金左：0;}middle.see {    保证金左：270px;}.middle.see-添加{    -webkit-过渡：保证金左300ms的;    -moz-过渡：保证金左300ms的;    -ms过渡：保证金左300ms的;    -o过渡：保证金左300ms的;    过渡：利润率左300ms的;    保证金左：0;}.middle.see-add.see-添加活性{    保证金左：270px;}

下面是标记：

＆LT; D​​IV CLASS =中间的开放式菜单＆gt;＆LT; / DIV＆GT;

解决方案

由于您的指令使用jQuery和jQuery修改DOM，我们需要告诉角度了。要做到这一点，你需要做的$ $范围申请，但你会碰上错误：已经在进行中消化

这是您的code将在下一个周期消化可安全执行$超时保证内部执行的code。

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

$超时（函数（）{    $ animate.addClass（ELEM，'看'）; }）;

在$超时服务是一个简单的服务，相当于方便的：

VAR超时=的setInterval（函数（）{    // 做东西    $ $范围适用于（）。}，0）;

您可以找到有关的官方文档中的摘要机制的广泛信息： https：//开头的文档.angularjs /错误/ $ rootScope / inprog

I can't figure out why the following animation doesn't work as it should:

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

And in this one the animation doesn't work at all (and class is not added either):

app.directive('openMenu', ['$animate', function($animate) { return { link: function(scope, elem) { elem.bind('click', function() { if(elem.is(':animated')) return; $animate.addClass(elem, 'see'); }); } } }]);

In the second code snippet I only removed $timeout, which is 0, I tried to use self-firing functions to check - animating works only when I am using timeouts. Can someone explain me why?

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

Here is the markup:

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

解决方案

Since your directive uses jQuery and jQuery modify the DOM, we need to tell angular about it. To do so, you need to do $scope.$apply but you would run into the error : "digest already in progress".

The code executed inside the $timeout guarantee that your code will be safely executed on the next digest cycle.

0 is the default value, you don't even need to specify it. You could simply write :

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

The $timeout service is simply a convenient service equivalent to :

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

You can find extensive information about the digest mechanism in the official documentation : docs.angularjs/error/$rootScope/inprog