这是我在 sass 中的 @for 循环：
@for $i from 1 through 10 {
#users[data-state='unload'] li:nth-child(#{$i}n) {
animation-delay: #{$i * 0.1}s;
}
}
生成这个css：
#users[data-state=loaded] li:nth-child(1n) {
animation-delay: 0.1s;
}
#users[data-state=loaded] li:nth-child(2n) {
animation-delay: 0.2s;
}
#users[data-state=loaded] li:nth-child(3n) {
animation-delay: 0.3s;
}
/// etc...
我想要做的是让我的 css 读作：
#users[data-state=loaded] li:nth-child(1n) {
animation-delay: 1s;
}
#users[data-state=loaded] li:nth-child(2n) {
animation-delay: 0.9s;
}
#users[data-state=loaded] li:nth-child(3n) {
animation-delay: 0.8s;
}
/// etc....
所以我想知道反转动画延迟所需的数学计算是什么，以便最后一个子元素的候选时间最长，第一个子元素的时间最长？
非常感谢 W9914420
更改动画延迟：#{$i * 0.1}s ; 作为动画延迟：#{(10 - $i) * 0.1}s ;
@for $i from 0 through 10 {
#users[data-state='unload'] li:nth-child(#{$i}n) {
animation-delay: #{(10 - $i) * 0.1}s;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句