vue实现图标闪烁
Vue 实现图标闪烁效果
图标闪烁可以通过 CSS 动画或 JavaScript 定时器实现。以下是几种常见方法：
方法一：使用 CSS 动画
定义闪烁的 CSS 动画关键帧：
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blink-icon {
animation: blink 1s infinite;
}在 Vue 模板中应用动画类：
<template>
<div class="icon blink-icon">✨</div>
</template>方法二：通过 v-bind 动态切换类
使用 Vue 的数据绑定动态控制样式：
<template>
<div
class="icon"
:class="{ 'transparent': isBlinking }"
@click="toggleBlink"
>🔔</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)
}
}
}
}
</script>
<style>
.transparent {
opacity: 0;
transition: opacity 0.3s ease;
}
</style>方法三：使用第三方动画库
安装 animate.css 库：
npm install animate.css在 Vue 组件中使用：
<template>
<div class="icon animate__animated animate__flash animate__infinite">💡</div>
</template>
<script>
import 'animate.css'
export default {
name: 'BlinkingIcon'
}
</script>方法四：通过 SVG 滤镜实现高级效果
对于 SVG 图标可以使用滤镜创建发光闪烁效果：
<template>
<svg width="100" height="100">
<defs>
<filter id="blink-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 10 -5" result="glow"/>
<feComposite in="SourceGraphic" in2="glow" operator="over"/>
</filter>
</defs>
<circle
cx="50"
cy="50"
r="40"
fill="gold"
:filter="isBlinking ? 'url(#blink-filter)' : ''"
:style="{ transition: 'filter 0.5s ease' }"
/>
</svg>
</template>性能优化建议
- 优先使用 CSS 动画而非 JavaScript 定时器
- 对频繁动画的元素启用硬件加速：
.blink-icon { will-change: opacity; transform: translateZ(0); } - 合理设置动画频率，避免过高频率导致性能问题
以上方法可根据实际需求选择，CSS 动画方案性能最优，JavaScript 方案控制更灵活，第三方库使用最简便。
