当前位置：首页 > VUE

vue实现闪烁

2026-03-07 00:25:30VUE

实现闪烁效果的方法

在Vue中实现闪烁效果可以通过CSS动画或JavaScript定时器来实现。以下是几种常见的实现方式：

使用CSS动画

通过定义@keyframes规则创建闪烁动画，并应用到元素上：

<template>
  <div class="blink-element">闪烁内容</div>
</template>

<style>
.blink-element {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

使用Vue数据绑定和setInterval

通过数据驱动的方式控制元素的显示隐藏：

<template>
  <div :style="{ opacity: isVisible ? 1 : 0 }">闪烁内容</div>
</template>

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

使用Vue过渡效果

利用Vue的<transition>组件实现平滑的闪烁过渡：

<template>
  <transition name="blink">
    <div v-if="show">闪烁内容</div>
  </transition>
</template>

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

<style>
.blink-enter-active, .blink-leave-active {
  transition: opacity 0.5s;
}
.blink-enter, .blink-leave-to {
  opacity: 0;
}
</style>

自定义指令实现

创建可复用的闪烁指令：

vue实现闪烁

<template>
  <div v-blink>闪烁内容</div>
</template>

<script>
export default {
  directives: {
    blink: {
      inserted(el) {
        setInterval(() => {
          el.style.opacity = el.style.opacity === '0' ? '1' : '0'
        }, 500)
      }
    }
  }
}
</script>