AngularJs在指令动画不起作用，除非我用$超时 [英] AngularJs animating in directive doesn't work unless i use $timeout

问题描述

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

  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.org /错误/ $ 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 : https://docs.angularjs.org/error/$rootScope/inprog

这篇关于AngularJs在指令动画不起作用，除非我用$超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！