vue实现圆圈扩大

Vue 实现圆圈扩大效果

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

使用 CSS 动画

通过 Vue 的 v-bind:class 或 v-bind:style 动态绑定 CSS 类或样式，结合 CSS 的 transition 或 animation 实现圆圈扩大效果。

<template>
  <div class="circle" :class="{ 'circle-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;
  transition: all 0.3s ease;
}

.circle-expand {
  width: 100px;
  height: 100px;
}
</style>

使用 JavaScript 动态控制样式

通过 Vue 的 v-bind:style 动态绑定样式属性，结合 JavaScript 计算属性或方法实现圆圈扩大效果。

<template>
  <div
    class="circle"
    :style="circleStyle"
    @click="toggleExpand"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      size: 50,
    };
  },
  computed: {
    circleStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        borderRadius: '50%',
        backgroundColor: '#42b983',
        transition: 'all 0.3s ease',
      };
    },
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      this.size = this.isExpanded ? 100 : 50;
    },
  },
};
</script>

使用 GSAP 实现平滑动画

如果需要更复杂的动画效果，可以使用 GSAP 库实现平滑的圆圈扩大动画。

<template>
  <div class="circle" ref="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.3,
        ease: 'power1.out',
      });
    },
  },
};
</script>

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

使用 Vue Transition

Vue 的 <transition> 组件可以结合 CSS 实现圆圈扩大的过渡效果。

<template>
  <transition name="expand">
    <div class="circle" v-if="showCircle" @click="toggleCircle"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showCircle: true,
    };
  },
  methods: {
    toggleCircle() {
      this.showCircle = !this.showCircle;
    },
  },
};
</script>

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

.expand-enter-active, .expand-leave-active {
  transition: all 0.3s ease;
}

.expand-enter, .expand-leave-to {
  width: 0;
  height: 0;
  opacity: 0;
}
</style>

以上方法可以根据具体需求选择适合的实现方式。CSS 动画适合简单的效果，GSAP 适合复杂的动画，而 Vue Transition 则适合与 Vue 的生命周期结合的过渡效果。