如何添加基於第n個位置的* progressive *動畫延遲？

我想動畫一個項目列表。第一個應該用0ms延遲動畫，第二個應該用50ms延遲做同樣的動畫，第三個用100ms延遲等等。該列表是動態的，所以我不知道長度。如何添加基於第n個位置的* progressive *動畫延遲？

這可能嗎？注意：我不特別需要關於動畫/關鍵幀的幫助，但是如何根據兄弟之間的相對位置使用第n個子類型或第n個類型（或其他任何東西？）來實現漸進式動畫延遲。

我使用React/SASS/Webpack如果有幫助。如有必要，我可以使用jQuery，但如果可能的話，我寧願避免它。

2016-11-23 John Trichereau

這裏有一個類似的問題http://stackoverflow.com/questions/28989708/is-it-possible-to-use-the-nth-child-value-as-一個參數在屬性和方式 – Chiller

@John檢查我的答案 –

下面是一個關於如何使用純CSS來做這種事情的例子。您可以輕鬆修改它以滿足您的需求。

$(document).ready(function() { 
 

 
    $('.myList img').each(function(i){ 
 
    var item = $(this); 
 
    setTimeout(function() { 
 
     item.toggleClass('animate'); 
 
    }, 150*i); 
 
    }) 
 

 
});

@keyframes FadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(.1); 
 
    } 
 

 
    85% { 
 
    opacity: 1; 
 
    transform: scale(1.05); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
.myList img { 
 
    float: left; 
 
    margin: 5px; 
 
    visibility: hidden; 
 
} 
 

 
.myList img.animate { 
 
    visibility: visible; 
 
    animation: FadeIn 1s linear; 
 
    animation-fill-mode:both; 
 
    animation-delay: .5s 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myList"> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
    <img src="http://placehold.it/350x30" /> 
 
</div>

來源

2016-11-23 10:34:22

這個答案對於一個固定長度的列表是好的，它甚至可以爲我所需要的。然而，這個問題是關於你不知道長度的動態列表。有關於此的任何線索？ –

@JohnTrichereau檢查我更新的答案。我在那裏添加了一些簡單的jquery，現在列表項可以動態變化。我想現在你已經被覆蓋了;） –

如何添加基於第n個位置的* progressive *動畫延遲？

回答

相關問題