当前位置：首页 > VUE

vue组件实现闪烁功能

2026-01-22 06:34:37VUE

实现闪烁功能的几种方法

方法1：使用CSS动画 通过CSS的animation和@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>

方法2：使用setInterval动态控制class 通过JavaScript定时切换CSS类名实现闪烁效果。

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 {
  opacity: 0;
  transition: opacity 0.3s;
}
</style>

方法3：使用Vue过渡动画 利用Vue的<transition>组件和过渡类名实现。

vue组件实现闪烁功能

<template>
  <transition name="blink" mode="out-in">
    <div v-if="show" key="content">闪烁内容</div>
  </transition>
</template>

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

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

方法4：使用第三方动画库 如animate.css等现成动画库快速实现。

<template>
  <div class="animate__animated animate__flash animate__infinite">闪烁内容</div>
</template>

<script>
import 'animate.css'
export default {}
</script>

注意事项