vue3 JavaScript实现微信和qq消息提醒闪烁效果

需求分析

最终效果如上图。
最开始想到使用css3动画，改变opacity来实现，这种方式最简单，实际做出来是呼吸灯效果，不是很好。
后来想到还是用js实现比较合适，改变隐藏和显示状态

代码

<template>
<div class="alarm-info">
  <div>|</div>
  <img src="@/assets/imgs/home/alarm.png" alt="" style="cursor: pointer" @click="popclick" />
  <!--这里是需要闪烁的元素-->
  <div class="alarm-number" :style="{ visibility: visibleStatus }">{{ state.alarmNumber }}</div>
  <!--end-->
  <div class="trigger-mask" @click="popclick"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
// 右上角红色告警闪烁效果
const visibleStatus = ref<"visible" | "hidden">("visible");
const blinkTimer = ref();
// 关闭闪烁
const stopBlink = () => {
  blinkTimer.value && clearInterval(blinkTimer.value);
};
//闪烁函数
const startBlink = () => {
  stopBlink();
  blinkTimer.value = window.setInterval(() => {
    if (visibleStatus.value == "visible") {
      visibleStatus.value = "hidden";
    } else {
      visibleStatus.value = "visible";
    }
  }, 500);
};
//获取告警数量请求
const getPopAlarmNumberData=()=>{
  //axios请求
  //……
  //如果数量大于0，就触发闪烁
  startBlink();
}
onMounted(() => {
  getPopAlarmNumberData();
});
//卸载页面记得清除定时器
onUnmounted(() => {
  blinkTimer.value && clearInterval(blinkTimer.value);
  blinkTimer.value = null;
});
</script>

注意

需要注意，闪烁的元素很可能没办法触发点击事件，这里解决办法，是上面定位一个透明元素，点击元素实现点击效果