当前位置：首页 > VUE

vue实现放大动画

2026-01-23 11:21:23VUE

Vue 实现放大动画的方法

在 Vue 中实现放大动画可以通过多种方式完成，包括使用 CSS 过渡、Vue 的过渡组件或第三方动画库。以下是几种常见的实现方法：

使用 CSS 过渡

通过 Vue 的 v-if 或 v-show 结合 CSS 过渡实现放大效果。定义一个简单的放大动画类，并通过 Vue 的动态类绑定触发动画。

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition name="scale">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

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

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
}

.scale-enter-active, .scale-leave-active {
  transition: transform 0.5s ease;
}

.scale-enter, .scale-leave-to {
  transform: scale(0);
}

.scale-enter-to, .scale-leave {
  transform: scale(1);
}
</style>

使用 Vue 的过渡组件结合 Animate.css

通过引入 Animate.css 库，可以快速实现丰富的动画效果，包括放大动画。

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomOut"
    >
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

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

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
}
</style>

使用 GSAP 实现高级动画

GSAP 是一个强大的动画库，可以用于实现更复杂的放大动画效果。

<template>
  <div>
    <button @click="toggleAnimation">Toggle Animation</button>
    <div ref="box" class="box"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      isScaled: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isScaled = !this.isScaled
      gsap.to(this.$refs.box, {
        duration: 0.5,
        scale: this.isScaled ? 1.5 : 1,
        ease: "power2.out"
      })
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
  transform-origin: center;
}
</style>

使用 Vue 的 `<transition>` 和自定义 JavaScript 钩子

通过 Vue 的 JavaScript 钩子函数，可以更灵活地控制动画过程。

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.transform = 'scale(0)'
    },
    enter(el, done) {
      const animation = el.animate(
        [{ transform: 'scale(0)' }, { transform: 'scale(1)' }],
        { duration: 500 }
      )
      animation.onfinish = () => {
        done()
      }
    },
    leave(el, done) {
      const animation = el.animate(
        [{ transform: 'scale(1)' }, { transform: 'scale(0)' }],
        { duration: 500 }
      )
      animation.onfinish = () => {
        done()
      }
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  margin: 20px auto;
}
</style>