css - ng-rep中的ng-animate无法正常工作

我的任务是为一系列项目创建级联效果（每个项目要比另一个项目晚一秒钟）。因此，您可以想象发现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;
}

正如您在我的小提琴中看到的那样，它在运行时没有任何作用。

最佳答案

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

我对它们没有太多的经验，但是我确实设法通过将项目逐渐添加到集合中来使它们运行。这不是一个很好的解决方案，但希望它能帮助您入门。我敢肯定会有一种使用自定义动画或类似方法执行此操作的方法。

您可以在此here查看我的镜头。

关于css - ng-rep中的ng-animate无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17053970/