动画 ngRepeat答案

【问题标题】：Animating ngRepeat动画 ngRepeat
【发布时间】：2014-05-12 16:05:40
【问题描述】：

我正在构建一个轮播，方法是从数组的开头移动一个元素，然后将其推回末尾，使轮播前进。从数组的末尾弹出一个元素并将其移到数组的开头将倒回该元素。这工作正常。当我尝试为它制作动画时，问题就出现了。

ng-repeat 项目应该在重复列表中的位置发生变化时广播“移动”事件。但是，似乎只有重复列表中的某些项目在其索引发生更改时会触发移动事件。

当您单击“shift - push”时，除了最后一个数字之外的所有数字都会动画。单击“pop - unshift”只会为第一个数字设置动画。

我认为当重复列表中的每个项目都被索引时，所有项目都应该触发移动事件。不对吗？

【问题讨论】：

【解决方案1】：

动画在 Angular 1.2 中发生了重大变化。如果您还没有使用它，您绝对应该考虑切换到 1.2 或更高版本。

现在您必须包含 angular-animate.js 文件，因为 AngularJS 的核心不再支持动画。基本上旧的 ngAnimate 指令现在已被弃用。相反，您可以使用纯 CSS 为所有内容设置动画。

对您而言，这意味着您可以为 .ng-enter、.ng-leave 和 .ng-move 声明一些 CSS 样式，以便为您的 ng-repeat 中的项目设置动画。例如，请查看以下链接：

在此处查看 Plunker 示例：

【讨论】：