当前位置：首页 > VUE

vue实现圆圈扩大

2026-01-17 07:02:54VUE

Vue 实现圆圈扩大效果

在 Vue 中实现圆圈扩大的效果可以通过 CSS 动画结合 Vue 的动态绑定来实现。以下是两种常见的方法：

方法一：使用 CSS transition 和 v-bind

通过 Vue 动态绑定样式，结合 CSS 的 transition 属性实现平滑的过渡效果。

<template>
  <div 
    class="circle" 
    :style="{ width: size + 'px', height: size + 'px' }"
    @click="expandCircle"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      size: 50
    }
  },
  methods: {
    expandCircle() {
      this.size += 20;
    }
  }
}
</script>

<style>
.circle {
  border-radius: 50%;
  background-color: #42b983;
  transition: all 0.3s ease;
}
</style>

方法二：使用 CSS animation 和动态类名

通过 Vue 的动态类名绑定，触发 CSS 的 @keyframes 动画。

<template>
  <div 
    class="circle" 
    :class="{ 'expand': isExpanding }"
    @click="isExpanding = true"
  ></div>
</template>

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

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #42b983;
}

.expand {
  animation: expand 0.5s forwards;
}

@keyframes expand {
  to {
    width: 100px;
    height: 100px;
  }
}
</style>

方法三：使用 GSAP 实现更复杂的动画

如果需要更复杂的动画效果，可以使用 GSAP 库。

vue实现圆圈扩大

<template>
  <div 
    ref="circle" 
    class="circle"
    @click="animateCircle"
  ></div>
</template>

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

export default {
  methods: {
    animateCircle() {
      gsap.to(this.$refs.circle, {
        width: 100,
        height: 100,
        duration: 0.5,
        ease: "power2.out"
      });
    }
  }
}
</script>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #42b983;
}
</style>