Question

我的任务是为一个项目列表创建一个级联效果（每个项目比其他项目晚几分之一）。所以你可以想象当我发现ng-animate时我是多么兴奋。我已经使用ng-repeat填充了我的列表，所以它似乎就像添加＆amp;修改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;
}

正如你在我的小提琴中看到的那样，它在跑步时没有做任何事情。

Answer 1

你的小提琴使用角度稳定，但动画仅适用于不稳定。

我对它们没有多少经验，但我确实设法通过逐步向集合中添加项目来实现它们。这不是一个很好的解决方案，但希望它会让你开始。我相信有一种方法可以使用自定义动画或类似的东西来做到这一点。

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

Answer 2

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

对于级联效果，您想要使用＆＃39; Stagger＆＃39;功能将延迟每行之间动画的执行。

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

希望有所帮助

ng-animate在ng-repeat中不起作用

2 个答案: