ng-repeat 中的 ng-animate 不起作用答案

【问题标题】：ng-animate in ng-repeat not workingng-repeat 中的 ng-animate 不起作用
【发布时间】：2013-06-07 21:14:15
【问题描述】：

我的任务是为项目列表创建级联效果（每个项目都比另一个项目晚几分之一秒）。所以你可以想象当我发现ng-animate 时我有多兴奋。我已经用ng-repeat 填充了我的列表，所以看起来就像添加和修改 CSS 一样简单。这就是我的目标：How to delay ngAnimate in ngRepeat

但它似乎并没有真正发挥作用。 有什么想法吗？这是我的小提琴示例：fiddle ng-animate。

html

<ul class="results-nav">
     <li class="" ng-animate="'animate'" ng-repeat="domain in resultsNav.domain" ng-click="scrollTo(domain.id)">{{domain.title}}</li>
</ul>

css

.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    opacity: 0;
}

.animate-enter.animate-enter-active {
    opacity: 1;
}

正如你在我的小提琴中看到的，它在运行时没有做任何事情。

【问题讨论】：

标签： css angularjs css-transitions angularjs-ng-repeat ng-animate

【解决方案1】：

您的小提琴正在使用角度稳定，但动画仅在不稳定时可用。

我对它们没有太多经验，但我确实设法通过逐步将项目添加到集合中来让它们运行起来。这不是一个很好的解决方案，但希望它能帮助您入门。我相信会有一种方法可以使用自定义动画或类似的东西来做到这一点。

你可以在here查看我的照片。

【讨论】：

【解决方案2】：

您是否已将脚本和 ngAnimate 作为依赖项添加到您的应用中？

对于级联效果，您希望使用“交错”功能，这将延迟每行之间动画的执行。

我创建了simple css library ngAnimate.css，它可能会对您有所帮助。您需要做的就是包含样式表，然后添加相关的类。

希望对你有帮助

【讨论】：

查看您的库时，我收到一个 503，上面写着“后端不健康”。当我写这个问题时，我们使用的是 angular 1.1.5 或其他东西。所以我认为现在情况会完全不同。而且可能更简单。不过，我仍然有兴趣查看您的图书馆。
对不起，我错过了这个问题的年龄。您在导航到网站时是否收到该错误？应该没问题，说不定你在我部署的时候抓到了。是的，从 1.2 开始，事情变得更容易了，因为 Angular 已经将动画合并到他们的指令中，所以你只需要添加模块，然后定义类。无论如何，该网站应该可以正常运行，因此请随时查看，如果您有任何问题，请告诉我。谢谢。
是的，现在看起来不错。这是一个很好的实现。我一定会用的。
酷。很高兴它对你有帮助。我会在不久的将来尝试添加更多动画