当前位置：首页 > VUE

vue实现动画代码

2026-03-30 12:26:34VUE

Vue 动画实现方法

Vue 提供了多种方式实现动画效果，主要依赖于内置的 <transition> 和 <transition-group> 组件，以及结合 CSS 或 JavaScript 钩子。

使用 CSS 过渡动画

通过 Vue 的 <transition> 组件和 CSS 的 transition 属性实现基础动画效果。

vue实现动画代码

<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 关键帧动画

结合 @keyframes 实现更复杂的动画效果。

<template>
  <transition name="bounce">
    <p v-if="show">Bouncing text</p>
  </transition>
</template>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

使用 JavaScript 钩子

通过 JavaScript 实现更精细的动画控制。

vue实现动画代码

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <p v-if="show">JavaScript animation</p>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter(el, done) {
      const timeline = gsap.timeline({
        onComplete: done
      })
      timeline.to(el, {
        opacity: 1,
        duration: 0.4
      }).to(el, {
        scaleX: 1.2,
        duration: 0.2
      }).to(el, {
        scaleX: 1,
        duration: 0.2
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        duration: 0.4,
        onComplete: done
      })
    }
  }
}
</script>

列表动画

使用 <transition-group> 实现列表项的动画效果。

<template>
  <button @click="addItem">Add Item</button>
  <button @click="removeItem">Remove Item</button>
  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </transition-group>
</template>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

第三方动画库集成

与第三方动画库如 Animate.css 结合使用。

<template>
  <transition
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
  >
    <p v-if="show">Animate.css animation</p>
  </transition>
</template>