带有ng-enter-stagger的Angular UI Router

mcneela86

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

我在这里有一个简单的jsfiddle:http : //jsfiddle.net/mcneela86/aodsux3p/,它使用ng-enter-stagger该类来交错每个列表项上的动画,并且看起来工作正常。

然后,我尝试对基于ui路由器构建的应用程序使用此方法,但动画无法正常工作:http : //plnkr.co/edit/IDpTQuwELq0zWsqMDrPw?p=preview

我是在做错什么,还是这种动画方法在ui路由器中不起作用?任何帮助将非常感激。

tasseKATT

在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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 2.0(带有ui-router的1.5)组件创建

带有Angular UI-Router的动态主体类

带有 Materialize-angular 问题的 Angularjs ui-router

Angular UI-Router,呈现父UI视图,但不包含带有模板的子视图

带有Angular和ui-router的Navbar下拉菜单不起作用

Angular UI-Router无法从其父状态解析子状态(带有动态URL参数)

Angular UI Router:具有相同URL的不同状态?

如何使用Angular UI Router解析所有状态的数据?

使用angular-ui-router处理没有hashbang的路由

Angular UI Router具有多个可选参数

带有ui-router的Angular App除非具有内联功能,否则不会命中控制器

是否有可能使状态参数看起来像带有angular-ui-router的路径?

Angular UI Router单独的文件

Angular UI Router重置$ scope

使用 ui-router-ng2 在 Angular 2 中不使用 ui-sref 更改状态。(Angular2 & UI-Router-ng2)

Angular UI Router:专用的UI视图

带有ui-router的Angularjs客户端路由

带有ui-router的可重用子状态

带有ui-router的子状态未解决

带有ui-router的浏览器导航控件

带有ui-router的选择性模板html

Angular 2,使用Angular Cli和Ui Router Ng2,解决/拒绝

ngAnimate没有在ui-view内添加ng-enter / ng-leave类

angular 2 ,在 ng build --prod 之后,ui-router 停止工作

Angular 1.3 + ui-router + generator-ng-poly嵌入nested(?)视图不起作用

通过ng-route或angular-ui-router渲染不同的布局| AngularJS

angular-route和angular-ui-router有什么区别?

Angular-UI-Router打字稿定义

Angular + Laravel + UI-Router问题