当前位置：首页 > VUE

vue 实现边框闪烁

2026-01-16 03:40:59VUE

实现边框闪烁的几种方法

使用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动画方案性能最佳，自定义指令方案复用性最强，根据具体需求选择合适方案。

vue 实现边框闪烁