我不明白,为什么下面的动画不会因为工作它应该:
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;}下面是标记:
< DIV CLASS =中间的开放式菜单>< / DIV>解决方案
由于您的指令使用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
更多推荐
AngularJs在指令动画不起作用,除非我用$超时
发布评论