当前位置：首页 > VUE

VUE实现闪动几次

2026-02-18 06:27:45VUE

VUE实现元素闪动效果

可以通过CSS动画或JavaScript定时器实现元素的闪动效果。以下是几种实现方式：

CSS动画实现

定义一个闪烁动画关键帧，通过v-bind绑定到元素上：

VUE实现闪动几次

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.blink-effect {
  animation: blink 0.5s;
}

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

<script>
export default {
  data() {
    return {
      shouldBlink: false,
      blinkCount: 0
    }
  },
  methods: {
    triggerBlink(times) {
      this.blinkCount = times
      this.startBlinking()
    },
    startBlinking() {
      if (this.blinkCount <= 0) return

      this.shouldBlink = true
      setTimeout(() => {
        this.shouldBlink = false
        this.blinkCount--
        if (this.blinkCount > 0) {
          setTimeout(() => this.startBlinking(), 100)
        }
      }, 500)
    }
  }
}
</script>

JavaScript定时器实现

通过动态修改样式实现闪烁效果：

VUE实现闪动几次

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

<script>
export default {
  methods: {
    blinkElement(times, interval = 500) {
      let count = 0
      const element = this.$refs.blinkElement
      const timer = setInterval(() => {
        element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden'
        count++
        if (count >= times * 2) {
          clearInterval(timer)
          element.style.visibility = 'visible'
        }
      }, interval / 2)
    }
  }
}
</script>

使用第三方库

安装vue-animate-onscroll等动画库：

npm install vue-animate-onscroll

<template>
  <div v-animate-onscroll="'blink'">闪烁内容</div>
</template>

<script>
import VueAnimateOnScroll from 'vue-animate-onscroll'
export default {
  directives: {
    'animate-onscroll': VueAnimateOnScroll
  }
}
</script>

每种方法都有适用场景，CSS动画性能较好但控制稍复杂，JavaScript实现更灵活，第三方库则提供现成解决方案。