vue项目里面状态闪烁

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

效果图：