当前位置：首页 > VUE

VUE实现闪动

2026-03-06 22:02:01VUE

VUE实现元素闪动效果

通过CSS动画结合VUE的数据绑定功能实现元素周期性显示/隐藏的闪动效果。

基础实现方法

VUE实现闪动

<template>
  <div :class="{ 'blink': isBlinking }">闪动内容</div>
</template>

<script>
export default {
  data() {
    return {
      isBlinking: false
    }
  },
  mounted() {
    setInterval(() => {
      this.isBlinking = !this.isBlinking
    }, 500)
  }
}
</script>

<style>
.blink {
  animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

使用CSS关键帧动画

纯CSS方案无需JavaScript控制，性能更优：

<template>
  <div class="blink">闪动内容</div>
</template>

<style>
.blink {
  animation: blink 0.5s linear infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}
</style>

带颜色的闪动效果

实现颜色交替变化的闪动：

VUE实现闪动

.color-blink {
  animation: colorBlink 1s infinite;
}
@keyframes colorBlink {
  0% { background-color: #ff0000; }
  50% { background-color: #0000ff; }
  100% { background-color: #ff0000; }
}

条件性闪动控制

通过VUE的v-if或v-show实现条件触发：

<template>
  <div v-show="shouldBlink" class="blink">警告信息</div>
</template>

<script>
export default {
  data() {
    return {
      shouldBlink: false
    }
  },
  methods: {
    toggleBlink() {
      this.shouldBlink = !this.shouldBlink
    }
  }
}
</script>

性能优化建议

尽量使用CSS动画而非JavaScript定时器
对移动端设备减少动画频率

使用will-change属性提升性能：

.blink {
will-change: opacity;
animation: blink 1s ease-in-out infinite;
}

复杂闪动模式

实现非对称时间间隔的闪动：

.custom-blink {
  animation: custom-blink 2s infinite;
}
@keyframes custom-blink {
  0% { opacity: 1; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

以上方法可根据实际需求组合使用，CSS方案适用于简单视觉效果，VUE数据绑定方案适用于需要程序控制的场景。

标签: VUE