1

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

但它似乎并没有真正发挥作用。有任何想法吗？这是我的小提琴示例：小提琴 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;
}

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

4

2 回答 2

1

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

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

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

希望能帮助到你

于 2014-04-17T16:48:56.740 回答
1

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

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

你可以在这里查看我的镜头。

于 2013-06-12T09:23:35.280 回答