当前位置：首页 > VUE

vue实现border动画

2026-03-29 05:45:53VUE

Vue 实现 Border 动画的方法

使用 CSS 动画和 Vue 的动态类绑定

通过 Vue 的动态类绑定结合 CSS 动画可以实现边框动画效果。定义一个 CSS 类，利用 transition 或 animation 实现边框颜色或宽度的变化。

<template>
  <div 
    class="animated-border" 
    :class="{ 'active': isActive }"
    @mouseenter="isActive = true"
    @mouseleave="isActive = false"
  >
    悬停查看边框动画
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  }
};
</script>

<style>
.animated-border {
  padding: 20px;
  border: 2px solid transparent;
  transition: border-color 0.5s ease;
}

.animated-border.active {
  border-color: #42b983;
}
</style>

使用伪元素实现动态边框

通过 CSS 伪元素（::before 或 ::after）可以创建更复杂的边框动画，比如渐显或移动效果。

<template>
  <div class="pseudo-border">
    伪元素边框动画
  </div>
</template>

<style>
.pseudo-border {
  position: relative;
  padding: 20px;
}

.pseudo-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #42b983;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.pseudo-border:hover::before {
  transform: scaleX(1);
}
</style>

结合 SVG 实现复杂边框动画

SVG 的 stroke-dasharray 和 stroke-dashoffset 属性可以实现描边动画效果，适合更复杂的边框需求。

<template>
  <div class="svg-border-container">
    <svg class="svg-border" width="200" height="100">
      <rect 
        x="5" y="5" 
        width="190" height="90" 
        stroke="#42b983" 
        stroke-width="2" 
        fill="transparent"
        stroke-dasharray="400"
        stroke-dashoffset="400"
      />
    </svg>
    <div class="content">SVG 边框动画</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const rect = document.querySelector('rect');
    rect.style.transition = 'stroke-dashoffset 1s ease';
    rect.style.strokeDashoffset = '0';
  }
};
</script>

<style>
.svg-border-container {
  position: relative;
  width: 200px;
  height: 100px;
}

.svg-border {
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>

使用第三方库（如 GSAP）

对于更高级的动画效果，可以使用 GSAP 或其他动画库来实现平滑的边框动画。

vue实现border动画

<template>
  <div ref="borderBox" class="gsap-border">
    GSAP 实现的边框动画
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to(this.$refs.borderBox, {
      duration: 1,
      borderColor: '#42b983',
      borderWidth: '2px',
      repeat: -1,
      yoyo: true
    });
  }
};
</script>

<style>
.gsap-border {
  padding: 20px;
  border: 2px solid transparent;
}
</style>