一、实现思路:
当有多个图标要实现同一 animation ,但是每个图标的 animation 又不能互相干扰,可以利用以下这个公式去设置动画的属性
@keyframes 动画名称 选择百分比实现
@keyframes 动画名称 {
0% {
// 具体动画实现效果
}
(1 / 总共要实现动画的元素个数)% {
// 恢复的正常状态
}
100% {
// 恢复的正常状态
}
}
具体动画的元素的 animation 属性设置:
动画的 duration 时长 = 预期动画时长 * 总共要实现动画的元素
动画的 delay 时长 = 动画时长 duration * (1 / 总共要实现动画的元素)
二、实现例子
动画效果:三个图标要各自scale、变换color,但同时只有一个图标有该效果,且第一个图标效果消失后,下一个图标就实现效果,如此循环往复。
代码实现:
动画的 duration 时长 = (预期实现效果时长)0.5 s * 3 = 1.5 s
动画的 delay 时长 = 1.5 s * 1 / 3 = 0.5 s
@keyframes 的分隔百分比为:1 / 3 = 33%
<div class="switchOrder" v-if="order.isSwitching">
<div class="switchOrder-title">切换中...</div>
<div class="switchOrder-sign">
<i class="iconfont icon-youyou-"></i>
<i class="iconfont icon-youyou-"></i>
<i class="iconfont icon-youyou-"></i>
</div>
</div>
.switchOrder {
width: 80px;
display: flex;
flex-direction: column;
justify-content: center;
}
@keyframes switchOrderAnimation {
0% {
color: orange;
transform: scale(1.2);
}
33% {
color: white;
transform: scale(1);
}
66% {
transform: scale(0.8);
}
100% {
color: white;
transform: scale(1);
}
}
.switchOrder .switchOrder-sign i {
width: 23px;
height: 23px;
display: inline-block;
font-size: 23px;
color: white;
}
.switchOrder .switchOrder-sign i:nth-child(1) {
animation: switchOrderAnimation 1.5s 0s infinite;
}
.switchOrder .switchOrder-sign i:nth-child(2) {
animation: switchOrderAnimation 1.5s .5s infinite;
}
.switchOrder .switchOrder-sign i:nth-child(3) {
animation: switchOrderAnimation 1.5s 1s infinite;
}