如何使用SCSS/SASS增加并发div的动画延迟 [英] How to use SCSS/SASS to increase animation-delay for concurrent divs
本文介绍了如何使用SCSS/SASS增加并发div的动画延迟的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试复制Windows 8磁贴的加载动画.似乎每个图块的动画延迟都比其前任稍高.我一直在以低效的方式使用nth-child来实现这一点,如下所示.有人知道我可以更有效地满足任意数量的div的方法吗?
I am trying to replicate the loading animation of the Windows 8 tiles. It seems that each tile has an animation delay which is slightly higher than its predecessor. I have been acheiving this currently by using nth-child in an inefficient way as you can see below. Does anyone know a way that I can achieve this in a more efficient manner that would cater for any number of divs?
.results div:nth-child(1) {
animation-delay: 0.25s;
}
.results div:nth-child(2) {
animation-delay: 0.5s;
}
.results div:nth-child(3) {
animation-delay: 0.75s;
}
.results div:nth-child(4) {
animation-delay: 1s;
}
.results div:nth-child(5) {
animation-delay: 1.25s;
}
.results div:nth-child(6) {
animation-delay: 1.5s;
}
.results div:nth-child(7) {
animation-delay: 1.75s;
}
.results div:nth-child(8) {
animation-delay: 2s;
}
推荐答案
您可以在Sass中使用for循环来做到这一点:
You can use a for loop in Sass to do this like so:
@for $i from 1 to 10 {
.results div:nth-child(#{$i}) { animation-delay: $i * 0.25s; }
}
然后,通过将10设置为所需的任意数量,可以对任意数量的div进行处理.
Then you can do it for any number of divs by making the 10 to what ever you need.
这篇关于如何使用SCSS/SASS增加并发div的动画延迟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文