我正在通过从阵列的开头移动元素然后将其推回到最终使旋转木马前进来构建旋转木马。从数组末尾弹出一个元素并将其取消移动到数组的开头将回退元素。这很好用。当我尝试动画时会出现麻烦。
ng-repeat项目应该在重复列表中的位置发生变化时广播“移动”事件。但是,只有当索引发生变化时,重复列表中的某些项才会触发移动事件。
查看我的Plunker示例:http://plnkr.co/edit/PxeTeqks9sXNM4d2lE79?p=preview
当你点击“shift - push”时,除了最后一个数字动画外。单击“pop - unshift”仅动画第一个数字。
我认为当重复列表中的每个项目都被索引更改时,所有项目都应该触发移动事件。这是不正确的吗?
答案 0 :(得分:2)
Angular 1.2中的动画发生了重大变化。如果您还没有使用它,请务必考虑切换到1.2或更高版本。
现在你必须包含angular-animate.js文件,因为AngularJS的核心不再支持动画了。基本上,旧的ngAnimate指令现已弃用。相反,你可以用纯CSS动画一切。
对于您来说,这意味着您可以为.ng-enter,.ng-leave和.ng-move声明一些CSS样式,以便为ng-repeat中的项目设置动画。有关示例,请查看以下链接:
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngrepeat
点击这里的Plunker示例: