Vue中如何实现动画和过渡？

Vue提供了内置的过渡和动画系统，可以让你在元素插入、更新或从DOM中移除时，轻松地应用过渡效果。这套系统基于<transition>和<transition-group>组件工作，并与CSS过渡/动画或JavaScript钩子无缝集成。

使用<transition>包裹单个元素

最基本的用法是用<transition>组件包裹一个会动态显示隐藏的元素（如通过v-if、v-show或动态组件切换控制）。Vue会在恰当的时机为包裹的元素添加或移除特定的CSS类名。

<template>
  <button @click="show = !show">切换</button>
  <transition name="fade">
    <p v-if="show">你好，渐入渐出</p>
  </transition>
</template>

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

<style>
/* 定义进入和离开的过渡样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Vue根据name属性（本例为fade）自动生成类名。在元素进入时，依次添加fade-enter-from、fade-enter-active、fade-enter-to；离开时，依次添加fade-leave-from、fade-leave-active、fade-leave-to。你只需在CSS中定义这些类的样式（通常定义*-active和*-from/*-to）即可。

定义CSS动画

你也可以直接使用CSS动画（@keyframes），用法与CSS过渡类似，区别在于*-enter-active和*-leave-active类中定义的是animation。

.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.25); }
  100% { transform: scale(1); }
}

使用<transition-group>处理列表

<transition-group>用于为v-for渲染的列表元素提供过渡效果。它渲染为一个真实的DOM元素（默认为<span>，可通过tag属性更改），并确保每个子元素都有独立的key。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

除了元素进入和离开的过渡，它还通过v-move类为元素位置变化（排序）提供了平滑的移动过渡。你需要额外添加一点CSS：

.list-move {
  transition: transform 0.5s ease;
}

使用JavaScript钩子实现复杂动画

对于更复杂的动画，或者需要与第三方动画库（如GSAP、Anime.js）集成时，可以使用<transition>组件提供的JavaScript钩子。

<transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <div v-if="show">被动画的元素</div>
</transition>

methods: {
  onEnter(el, done) {
    // 使用 GSAP 等库触发动画，并在完成后调用 done()
    gsap.from(el, { duration: 0.5, opacity: 0, onComplete: done });
  }
}

这些钩子函数让你能完全控制动画过程，done回调用于告知Vue动画何时完成。

因此，Vue的过渡系统提供了从简单CSS到复杂JavaScript控制的完整频谱。理解其类名规则和生命周期，能让你轻松地为应用增添生动、专业的交互反馈。