思路就是使用:style,时时改变透明度opacity,最后形成闪烁效果。此处共两种状态,绿色状态呼吸效果,红色状态快速闪烁。
html:
<span>状态</span>
<span
class="point-state"
:class="item.state == 'online' ? 'outline' : 'online'"
:style="
item.state == 'online'
? { opacity: changeOpcity1 }
: { opacity: changeOpcity }
"
>
</span>
css:
.point-state {
width: 12px;
height: 12px;
border-radius: 100%;
background: #eee;
margin-left: 10px;
}
.outline {
background: #d9001b;
}
.online {
background: #10c504;
box-shadow: 1px 1px 10px #b5ffae;
}
data:
// 控制绿灯闪烁
changeOpcity: 1,
flag: 1,
// 控制红灯闪烁
changeOpcity1: 1,
flag1: 1,
js:
mounted() {
this.controlLight();
},
methods: {
// 控制闪烁
controlLight() {
setInterval(() => {
if (this.flag) {
this.$nextTick(() => {
this.changeOpcity = this.changeOpcity - 0.1;
});
} else {
this.$nextTick(() => {
this.changeOpcity = this.changeOpcity + 0.1;
});
}
if (this.changeOpcity < 0.3) {
this.flag = 0;
} else if (this.changeOpcity > 0.99) {
this.flag = 1;
}
}, 140);
setInterval(() => {
if (this.flag1) {
this.$nextTick(() => {
this.changeOpcity1 = this.changeOpcity1 - 0.1;
});
} else {
this.$nextTick(() => {
this.changeOpcity1 = this.changeOpcity1 + 0.1;
});
}
if (this.changeOpcity1 < 0.3) {
this.flag1 = 0;
} else if (this.changeOpcity1 > 0.99) {
this.flag1 = 1;
}
}, 30);
},
}
效果图: