vue实现圆圈扩大

Vue 实现圆圈扩大效果

在 Vue 中实现圆圈扩大的效果可以通过 CSS 动画或 JavaScript 动态控制样式。以下是两种常见方法：

使用 CSS 动画

通过 Vue 绑定样式或类名，结合 CSS 的 transition 或 @keyframes 实现平滑的圆圈扩大效果。

<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 @keyframes 动画

通过动态添加类名触发预先定义的 @keyframes 动画。

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

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</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 库。

<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: "elastic.out(1, 0.3)"
      });
    }
  }
}
</script>

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

实现要点

• 基础实现：通过 Vue 数据驱动样式变化，结合 CSS 的 transition 实现平滑过渡。
• 复杂动画：使用 @keyframes 或 GSAP 实现更丰富的动画效果。
• 交互触发：通常通过点击或鼠标事件触发动画，也可以使用生命周期钩子自动执行。

以上方法均可在 Vue 2 或 Vue 3 中使用，根据项目需求选择合适的方案。