vue项目里面状态闪烁_vue闪烁特效-CSDN博客

安宇雨 - 随手采集
2023-10-08 10:54:19
随手采集
0000-未整理-等待研究

思路就是使用：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);    },}

效果图：