当前位置：首页 > VUE

vue实现图片闪烁

2026-03-08 10:57:11VUE

实现图片闪烁的方法

在Vue中实现图片闪烁效果可以通过CSS动画或JavaScript定时器来控制图片的显示与隐藏。以下是几种常见的实现方式：

使用CSS动画

通过定义关键帧动画实现闪烁效果：

<template>
  <img :src="imageUrl" class="blink-image" />
</template>

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

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

使用Vue数据绑定和setInterval

通过定时修改数据属性实现闪烁：

<template>
  <img :src="imageUrl" :style="{ opacity: currentOpacity }" />
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      currentOpacity: 1,
      blinkInterval: null
    }
  },
  mounted() {
    this.blinkInterval = setInterval(() => {
      this.currentOpacity = this.currentOpacity === 1 ? 0 : 1;
    }, 500);
  },
  beforeDestroy() {
    clearInterval(this.blinkInterval);
  }
}
</script>

使用CSS类切换

通过定时切换CSS类实现闪烁效果：

<template>
  <img :src="imageUrl" :class="{ 'blink': isBlinking }" />
</template>

<style>
.blink {
  opacity: 0;
  transition: opacity 0.5s ease;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      isBlinking: false
    }
  },
  mounted() {
    setInterval(() => {
      this.isBlinking = !this.isBlinking;
    }, 500);
  }
}
</script>

使用第三方动画库

考虑使用Vue Transition或第三方动画库如Animate.css：

vue实现图片闪烁

<template>
  <transition name="blink">
    <img :src="imageUrl" v-show="showImage" />
  </transition>
</template>

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

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      showImage: true
    }
  },
  mounted() {
    setInterval(() => {
      this.showImage = !this.showImage;
    }, 500);
  }
}
</script>