vue 实现边框闪烁
Vue 实现边框闪烁效果
边框闪烁可以通过CSS动画结合Vue的动态样式绑定实现。以下是几种常见方法：
使用CSS动画和Vue绑定
定义CSS关键帧动画：
@keyframes blink {
0% { border-color: transparent; }
50% { border-color: #ff0000; }
100% { border-color: transparent; }
}
.blinking-border {
border: 2px solid;
animation: blink 1.5s infinite;
}在Vue组件中应用：
<template>
<div :class="{ 'blinking-border': isBlinking }">内容</div>
</template>
<script>
export default {
data() {
return {
isBlinking: true
}
}
}
</script>通过动态样式实现
使用Vue的style绑定动态改变边框颜色：
<template>
<div
:style="{
border: '2px solid',
borderColor: borderColor,
transition: 'border-color 0.5s ease'
}"
@mouseover="startBlink"
@mouseleave="stopBlink"
>
悬浮触发闪烁
</div>
</template>
<script>
export default {
data() {
return {
borderColor: 'transparent',
blinkInterval: null
}
},
methods: {
startBlink() {
let colors = ['#ff0000', 'transparent']
let index = 0
this.blinkInterval = setInterval(() => {
this.borderColor = colors[index % 2]
index++
}, 500)
},
stopBlink() {
clearInterval(this.blinkInterval)
this.borderColor = 'transparent'
}
}
}
</script>使用第三方动画库
安装animate.css库：
npm install animate.css在Vue中使用：
<template>
<div class="animated infinite flash">默认闪烁效果</div>
</template>
<script>
import 'animate.css'
export default {
mounted() {
// 可以动态控制
setInterval(() => {
this.$refs.box.classList.toggle('flash')
}, 1000)
}
}
</script>注意事项
- 性能优化：CSS动画比JavaScript实现的动画性能更好
- 可访问性：避免过度闪烁影响用户体验
- 浏览器兼容性：检查动画属性在不同浏览器的支持情况
- 响应式设计：确保在不同屏幕尺寸下效果一致
以上方法可根据具体需求选择，CSS动画方案适合简单效果，JavaScript方案适合需要精确控制的场景。
