web-dev-qa-db-ja.com

ng RepeatでngAnimateを遅延させる方法

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/246

angularjsangularjs-ng-repeatng-animate
22
doorman

これは現在、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)
27
matsko

この効果を得るには、繰り返される要素にtransition-delayスタイルを設定します。 （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によって作成された 例のフォーク です。

14
user2418191