我試圖通過將動(dòng)畫應(yīng)用于每個(gè)子元素來創(chuàng)建級(jí)聯(lián)效果。我想知道是否有比這更好的方法：.myClass img:nth-child(1){ -webkit-animation: myAnimation 0.9s linear forwards;}.myClass img:nth-child(2){ -webkit-animation: myAnimation 0.9s linear 0.1s forwards;}.myClass img:nth-child(3){ -webkit-animation: myAnimation 0.9s linear 0.2s forwards;}.myClass img:nth-child(4){ -webkit-animation: myAnimation 0.9s linear 0.3s forwards;}.myClass img:nth-child(5){ -webkit-animation: myAnimation 0.9s linear 0.4s forwards;}依此類推...因此，基本上，我希望每個(gè)孩子都有一個(gè)動(dòng)畫開始，但要有一個(gè)延遲。感謝您的輸入！另外：也許我沒有正確解釋我所關(guān)注的問題：這與我有多少孩子無關(guān)。如何執(zhí)行此操作而不必寫下每個(gè)孩子的屬性……例如，當(dāng)我不知道會(huì)有多少個(gè)孩子時(shí)。
3 回答
人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
這是一種使用for循環(huán)的scss方法。
@for $i from 1 through 10 {
.myClass img:nth-child(#{$i}n) {
animation-delay: #{$i * 0.5}s;
}
}
Helenr
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊
在[希望不久]將來時(shí)attr和calc被完全支持，我們就可以做到這一點(diǎn)沒有JavaScript。
HTML：
<ul class="something">
<li data-animation-offset="1.0">asdf</li>
<li data-animation-offset="1.3">asdf</li>
<li data-animation-offset="1.1">asdf</li>
<li data-animation-offset="1.2">asdf</li>
</ul>
CSS：
.something > li
{
animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}
這將產(chǎn)生一種效果，其中每個(gè)列表項(xiàng)都以看起來似乎是隨機(jī)的順序進(jìn)行動(dòng)畫處理。
添加回答
舉報(bào)
0/150
提交
取消