当前位置：首页 > VUE

vue实现动画代码

2026-01-17 18:53:42VUE

Vue 动画实现方法

Vue 提供了多种方式实现动画效果，包括内置过渡组件、CSS 动画库集成以及第三方动画库结合。以下是几种常见实现方法：

使用 Vue 内置过渡组件

Vue 的 <transition> 和 <transition-group> 组件可直接实现基础动画效果，通过 CSS 类名或 JavaScript 钩子控制动画过程。

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello Vue!</p>
  </transition>
</template>

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

结合 CSS 动画库（如 Animate.css）

通过引入第三方 CSS 动画库，快速实现复杂动画效果。

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Animate.css 效果</p>
  </transition>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return { show: true }
  }
}
</script>

使用 JavaScript 动画钩子

通过 transition 组件的 JavaScript 钩子实现更复杂的动画逻辑。

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">JavaScript 动画</p>
  </transition>
</template>

<script>
export default {
  data() {
    return { show: true }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      let opacity = 0
      const interval = setInterval(() => {
        opacity += 0.1
        el.style.opacity = opacity
        if (opacity >= 1) {
          clearInterval(interval)
          done()
        }
      }, 100)
    },
    leave(el, done) {
      let opacity = 1
      const interval = setInterval(() => {
        opacity -= 0.1
        el.style.opacity = opacity
        if (opacity <= 0) {
          clearInterval(interval)
          done()
        }
      }, 100)
    }
  }
}
</script>

第三方动画库（如 GSAP）

对于高级动画需求，可结合 GSAP 等专业动画库。

<template>
  <button @click="show = !show">Toggle</button>
  <transition @enter="enter" @leave="leave" :css="false">
    <p v-if="show">GSAP 动画</p>
  </transition>
</template>

<script>
import gsap from 'gsap'
export default {
  data() {
    return { show: true }
  },
  methods: {
    enter(el, done) {
      gsap.from(el, {
        duration: 1,
        opacity: 0,
        y: 50,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: 1,
        opacity: 0,
        y: -50,
        onComplete: done
      })
    }
  }
}
</script>