当前位置：首页 > VUE

VUE实现闪动几次

2026-01-17 13:54:01VUE

VUE实现元素闪动效果

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

CSS动画方式

<template>
  <div class="blink-element" :class="{ 'blink': isBlinking }">闪动内容</div>
  <button @click="startBlink">开始闪动</button>
</template>

<script>
export default {
  data() {
    return {
      isBlinking: false,
      blinkCount: 0
    }
  },
  methods: {
    startBlink() {
      this.blinkCount = 0
      this.isBlinking = true
      const interval = setInterval(() => {
        this.blinkCount++
        if (this.blinkCount >= 6) { // 闪动6次
          clearInterval(interval)
          this.isBlinking = false
        }
      }, 300)
    }
  }
}
</script>

<style>
.blink-element {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.blink {
  animation: blink-animation 0.3s infinite;
}

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

纯JavaScript方式

<template>
  <div ref="blinkElement">闪动内容</div>
  <button @click="blinkElement(6)">闪动6次</button>
</template>

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

使用Vue过渡动画

<template>
  <transition name="blink">
    <div v-if="show">闪动内容</div>
  </transition>
  <button @click="triggerBlink(5)">触发闪动</button>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    triggerBlink(times) {
      let count = 0
      const interval = setInterval(() => {
        this.show = !this.show
        count++
        if (count >= times * 2) {
          clearInterval(interval)
          this.show = true
        }
      }, 150)
    }
  }
}
</script>

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