如何延迟ngAnimate在ngRepeat(How to delay ngAnimate in n

当使用ngAnimate在ngRepeat每个项目褪色，目前所有项目在同一时间褪色英寸 是否有可能对每个项目上一个项目后，淡入淡出已经与例如50％产生了连锁效应？

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

使用ngAnimate这将是很好，如果有可能推迟，例如像这样每个项目的动画：

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

有没有办法解决这个问题的方法吗？

谢谢！

加入GitHub的https://github.com/angular/angular.js/issues/2460

Answer 1:

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

为了使用它，使用ng-enter-stagger在你的CSS选择器，就像这样：

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)

Answer 2:

您可以通过设置重复元素的过渡延迟风格得到这个效果。 （需要V1.1.5）

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{$index * 500}}ms">

你必须在你的CSS单独设置你的过渡性质，否则内联样式将覆盖整个过渡：

.phone-enter {
  opacity:0;
  -webkit-transition-property: all;
  -webkit-transition-timing-function: ease-out-cubic;
  -webkit-transition-duration: 400ms;
}
.phone-enter.phone-enter-active {
  opacity: 1;
}

这里是一个例子的叉通过heyotwell创建。

文章来源: How to delay ngAnimate in ngRepeat