如何延迟ngAnimate在ngRepeat

问题描述

在使用ngAnimate在ngRepeat每个项目褪色，目前所有项目在同一时间褪色英寸是否有可能对每个项目的previous项目已经褪去后淡入例如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?

谢谢！

href=\"https://github.com/angular/angular.js/issues/2460\">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-进入-错开选择，就像这样：

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;
}

上海社会科学院（如果正在使用）：

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

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

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