vue 实现边框闪烁
实现边框闪烁的几种方法
使用CSS动画
通过CSS的@keyframes定义动画效果，结合Vue的v-bind:class动态绑定类名实现边框闪烁效果。
<template>
<div :class="{ 'blinking-border': isBlinking }">内容区域</div>
</template>
<style>
.blinking-border {
border: 2px solid #ff0000;
animation: blink 1s infinite;
}
@keyframes blink {
0% { border-color: #ff0000; }
50% { border-color: transparent; }
100% { border-color: #ff0000; }
}
</style>
<script>
export default {
data() {
return {
isBlinking: true
}
}
}
</script>动态样式绑定
通过Vue的响应式数据控制样式对象，实现更灵活的闪烁效果控制。
<template>
<div :style="borderStyle">内容区域</div>
<button @click="toggleBlink">切换闪烁</button>
</template>
<script>
export default {
data() {
return {
isBlinking: true,
colors: ['#ff0000', 'transparent'],
currentIndex: 0
}
},
computed: {
borderStyle() {
return {
border: `2px solid ${this.colors[this.currentIndex]}`,
transition: 'border-color 0.5s ease'
}
}
},
methods: {
toggleBlink() {
this.isBlinking = !this.isBlinking
if (this.isBlinking) {
this.startBlink()
} else {
clearInterval(this.blinkInterval)
}
},
startBlink() {
this.blinkInterval = setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.colors.length
}, 500)
}
},
mounted() {
this.startBlink()
},
beforeDestroy() {
clearInterval(this.blinkInterval)
}
}
</script>使用第三方动画库
引入animate.css等CSS动画库可以快速实现丰富的闪烁效果。
<template>
<div class="animated infinite flash">内容区域</div>
</template>
<script>
import 'animate.css'
export default {
// 组件逻辑
}
</script>自定义指令实现
创建Vue自定义指令封装闪烁逻辑，提高复用性。
<template>
<div v-blink>内容区域</div>
</template>
<script>
export default {
directives: {
blink: {
inserted(el) {
el.style.border = '2px solid #ff0000'
let visible = true
setInterval(() => {
visible = !visible
el.style.borderColor = visible ? '#ff0000' : 'transparent'
}, 500)
}
}
}
}
</script>以上方法均可实现边框闪烁效果，CSS动画方案性能最佳，自定义指令方案复用性最强，根据具体需求选择合适方案。
