具有ng-enter-stagger的Angular UI路由器

时间:2015-10-15 08:39:39

标签: angularjs angular-ui-router angularjs-ng-repeat ng-animate

我希望有人可以帮助我,我已经坚持了一段时间。

我在这里有一个简单的jsfiddle:http://jsfiddle.net/mcneela86/aodsux3p/ 哪个使用ng-enter-stagger类来错开每个列表项的动画,它似乎工作正常。

然后我尝试将这个方法与在ui-router上构建的应用程序一起使用,但动画无效:http://plnkr.co/edit/IDpTQuwELq0zWsqMDrPw?p=preview

我做错了什么或者这种动画方法在ui-router中不起作用? 任何帮助都会非常感激。

1 个答案:

答案 0 :(得分:2)

在JSFiddle中使用AngularJS版本1.2.1,而在Plunker版本1.4.1中使用。这两个版本之间发生了很大变化。

来自文档:

  

应用程序启动时是否会运行动画?

     

不,他们不是。当一个应用程序被引导时,Angular会   禁止运行动画以避免动画的狂热   一旦浏览器呈现屏幕就被触发。对于   这个工作,Angular将等待两个摘要周期,直到启用   动画。从那以后,任何动画触发布局都会发生变化   该应用程序将正常触发动画。

在这种情况下,您可以使用ng-animate-children属性。

例如:

<ul ng-animate-children>
    <li class="list-item" ng-repeat="dog in dogs">{{ dog }}</li>
</ul>

演示: http://plnkr.co/edit/X2DDZUuspOEWEWkADtxw?p=preview