当前位置：首页 > VUE

vue 实现闪烁

2026-02-10 01:33:51VUE

Vue 实现元素闪烁效果

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

使用 CSS 动画

定义一个闪烁的 CSS 动画，并通过 Vue 绑定 class 或 style 来触发：

vue 实现闪烁

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

<script>
export default {
  data() {
    return {
      isBlinking: true
    }
  }
}
</script>

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

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

使用 setInterval 控制样式

通过 JavaScript 定时改变样式实现更灵活的控制：

vue 实现闪烁

<template>
  <div :style="{ opacity: currentOpacity }">闪烁内容</div>
</template>

<script>
export default {
  data() {
    return {
      currentOpacity: 1,
      blinkInterval: null
    }
  },
  mounted() {
    this.blinkInterval = setInterval(() => {
      this.currentOpacity = this.currentOpacity === 1 ? 0.2 : 1
    }, 500)
  },
  beforeDestroy() {
    clearInterval(this.blinkInterval)
  }
}
</script>

使用 Vue 过渡效果

利用 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
    }, 500)
  }
}
</script>

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

使用第三方库

对于更复杂的动画效果，可以考虑使用动画库如 Anime.js 或 GSAP：

<template>
  <div ref="blinkElement">闪烁内容</div>
</template>

<script>
import anime from 'animejs'

export default {
  mounted() {
    anime({
      targets: this.$refs.blinkElement,
      opacity: [0, 1],
      duration: 500,
      loop: true,
      direction: 'alternate'
    })
  }
}
</script>

每种方法各有优缺点，CSS 动画性能较好但控制不够灵活，JavaScript 实现更灵活但可能影响性能，可根据具体需求选择适合的方案。

标签: vue