vue实现闪烁

Vue实现元素闪烁效果

使用CSS动画

通过Vue绑定class结合CSS动画实现闪烁效果。定义一个闪烁的CSS类，通过Vue动态切换这个类。

.blink {
  animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

<template>
  <div :class="{ blink: isBlinking }">闪烁的内容</div>
  <button @click="toggleBlink">切换闪烁</button>
</template>

<script>
export default {
  data() {
    return {
      isBlinking: false
    }
  },
  methods: {
    toggleBlink() {
      this.isBlinking = !this.isBlinking
    }
  }
}
</script>

使用setInterval控制样式

通过JavaScript定时器动态改变元素样式，实现更灵活的控制。

<template>
  <div :style="{ opacity: currentOpacity }">闪烁的内容</div>
  <button @click="startBlink">开始闪烁</button>
  <button @click="stopBlink">停止闪烁</button>
</template>

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

使用Vue过渡效果

利用Vue的transition组件结合CSS实现平滑的闪烁过渡效果。

<template>
  <transition name="blink">
    <div v-if="show">闪烁的内容</div>
  </transition>
  <button @click="toggleShow">切换闪烁</button>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      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>

使用第三方动画库

引入第三方动画库如Animate.css可以快速实现各种闪烁效果。

安装Animate.css：

npm install animate.css

使用示例：

<template>
  <div class="animated infinite flash">闪烁的内容</div>
</template>

<script>
import 'animate.css'
export default {
  // 组件代码
}
</script>

以上方法可以根据具体需求选择，CSS动画性能较好适合简单效果，JavaScript控制更灵活，第三方库则提供了更多预设动画效果。