当前位置：首页 > VUE

vue实现图标闪烁

2026-03-09 16:54:33VUE

实现图标闪烁的方法

在Vue中实现图标闪烁效果可以通过CSS动画或JavaScript动态控制样式。以下是几种常见方法：

使用CSS动画

通过定义@keyframes动画规则并应用到图标元素上：

vue实现图标闪烁

<template>
  <div class="blinking-icon">
    <i class="icon"></i>
  </div>
</template>

<style>
.icon {
  font-size: 24px;
  color: red;
  animation: blink 1s infinite;
}

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

使用Vue的动态样式绑定

通过数据属性控制样式变化：

vue实现图标闪烁

<template>
  <div>
    <i :class="['icon', { 'blink': isBlinking }]"></i>
    <button @click="toggleBlink">Toggle Blink</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBlinking: false,
      blinkInterval: null
    }
  },
  methods: {
    toggleBlink() {
      this.isBlinking = !this.isBlinking
      if (this.isBlinking) {
        this.blinkInterval = setInterval(() => {
          this.isBlinking = !this.isBlinking
        }, 500)
      } else {
        clearInterval(this.blinkInterval)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.blinkInterval)
  }
}
</style>

<style>
.icon {
  font-size: 24px;
  color: blue;
}

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

使用第三方动画库

安装并使用vue-animate-css等动画库：

npm install vue-animate-css

<template>
  <div class="animated infinite flash">
    <i class="icon"></i>
  </div>
</template>

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

<style>
.icon {
  font-size: 24px;
  color: green;
}
</style>

实现条件性闪烁

根据特定条件控制闪烁效果：

<template>
  <div>
    <i :class="['icon', { 'blinking': hasNotification }]"></i>
  </div>
</template>

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

<style>
.icon {
  font-size: 24px;
  color: orange;
}

.blinking {
  animation: blink 1s infinite;
}

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

以上方法可以根据具体需求选择使用，CSS动画方式性能较好，JavaScript控制方式更灵活。对于复杂场景，可以考虑使用GSAP等专业动画库。