往期推荐:
「CSS之变量」
前言
上一章我们说到了 CSS 变量,如果还没看的话,请看往期推荐的 CSS 之变量。接下来,我们就看一下,对于 CSS 变量来说的神奇操作。
条形加载条
先看实现后的效果:
我们先来想想条形加载条的实现逻辑,它是由若干条直线组成,每条直线通过控制时间差,在不同时间段运行相同的动画,然后形成一个动态的加载效果。这样我们就能想到大概的实现代码。
代码实现
<ul class="strip-loading">
<li v-for="v in 6" :key="v"></li>
</ul>
复制代码
.strip-loading {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
li {
border-radius: 8px;
width: 16px;
height: 70px;
background-color: white;
animation: beat 1s ease-in-out infinite;
& + li {
margin-left: 20px;
}
&:nth-child(2) {
animation-delay: 200ms;
}
&:nth-child(3) {
animation-delay: 400ms;
}
&:nth-child(4) {
animation-delay: 600ms;
}
&:nth-child(5) {
animation-delay: 800ms;
}
&:nth-child(6) {
animation-delay: 1s;
}
}
}
@keyframes beat {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
}
复制代码
观看上面代码,你会发现只有每个 li 的的 animation-delay 不同,其余都是相同的,如果有一个加载条有很多条直线的话,可想而知代码是很难维护的。这个时候我们就可以通过在不同 li 的作用域下声明不同的 CSS 变量,引入到 animation-delay 中,就可以完美的解决这个问题。
优化后的代码
<ul class="strip-loading">
<li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
</ul>
复制代码
.strip-loading {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
li {
$time: calc((var(--line-index) - 1) * 200ms);
border-radius: 8px;
width: 16px;
height: 70px;
background-color: white;
animation: beat 1s ease-in-out $time infinite;
& + li {
margin-left: 20px;
}
}
}
@keyframes beat {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
}
复制代码
好,今天就到这里了,今天努力的你依然是最棒的,Bye Bye!!!
评论