如何在ngRepeat中延遲ngAnimate

當使用ngAnimate淡入ngRepeat中的每個項目時，當前所有項目都會同時淡入。在前一個項目淡化爲例如每個項目之後是否可能淡入？ 50％導致級聯效應？如何在ngRepeat中延遲ngAnimate

<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

來源

2013-04-08 doorman

你能更具體地說明你想做什麼嗎？ – 2013-04-09 00:15:43

我重提了這個問題...... – doorman 2013-04-09 09:05:44

這更清晰 - 感謝重新安排。不幸的是，我認爲ngAnimate目前不可能。 ngAnimate使用CSS轉換並使用基於事件的類名來觸發它們。當ngRepeat第一次運行時，所有這些現有項目都基本上同時發生它們的事件。我會再想一想... – 2013-04-09 18:05:31

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

要使用它，在你的CSS使用ng-enter-stagger選擇，就像這樣：

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)

來源

2013-11-08 03:12:23 matsko

無法在Angular 1.5中使用離子型： – jdnichollsc 2016-05-01 20:13:30

您可以通過設置重複元素的過渡延遲風格得到這個效果。（需要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; 
}

下面是創建fork of the example heyotwell。

來源

2013-05-24 16:03:18 user2418191

如何在ngRepeat中延遲ngAnimate

回答

相關問題