如何在 ngRepeat 中延迟 ngAnimate [英] How to delay ngAnimate in ngRepeat

问题描述

当使用 ngAnimate 淡入 ngRepeat 中的每个项目时，当前所有项目同时淡入.每个项目是否有可能在前一个项目淡入后淡入，例如50% 导致级联效应?

When using ngAnimate to fade in each item in ngRepeat, currently all items fade in at the same time. Is it possible for each item to fade in after the previous item has faded to e.g. 50% resulting in a cascading effect?

<ul>
   <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}">
     <img src="{{phone.img}}"> {{phone.name}}
   </li>
</ul>

使用 ngAnimate 如果可以延迟每个项目的动画会很好，例如像这样:

Using ngAnimate it would be nice if it would be possible to delay the animation of each item e.g. like this:

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}">

有没有办法解决这个问题?

Is there a way to solve this?

谢谢！

添加到 GitHub https://github.com/angular/angular.js/issues/2460

Added to GitHub https://github.com/angular/angular.js/issues/2460

推荐答案

现在 1.2 原生支持:https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

This is now supported natively with 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

要使用它，请在 CSS 中使用 ng-enter-stagger 选择器，如下所示:

To make use of it, use the ng-enter-stagger selector in your CSS, like so:

css:

.animated.ng-enter-stagger {
  transition-delay: 0.3s;
  animation-delay: 0.3s;
}

sass(如果正在使用):

=stagger($delay)
  &-stagger
    transition-delay: $delay
    animation-delay: $delay

.animated
  &.ng-enter
    +stagger(0.3s)

这篇关于如何在 ngRepeat 中延迟 ngAnimate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！