Vue3 Transition 过渡效果之基于 CSS 过渡

介绍 Transistion

路由组件的切换、动态组件的切换、v-if 条件渲染组件以及 v-show 显示组件原本是没有任何过渡（CSS 动画）效果的。然而，Vue 的内置组件<Transition>可以实现过渡效果。Vue 过渡有两种方式：1. 基于 CSS 的过渡；2. 基于 JS 钩子函数的过渡。

过渡的阶段

上图是过渡的 6 个阶段示意图。总体是进入和离开两个阶段，进入和离开又各自有两个阶段。下表格是对每一个阶段的解释：

过渡是组件被渲染到页面和组件从页面被销毁的过程，即进入和离开。进入和离开实现过渡效果使用的是 CSS 样式，而样式写在 Transistion 组件规定好的 6 个类名里。如下表格：

阶段	作用
v-enter-from	进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active	进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to	进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from	离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active	离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to	离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力。

进入和离开

1. 进入：进入就是组件（元素）渲染到页面上的过程就是进入阶段；
2. 离开：离开就是组件已经被渲染到页面中，由于条件渲染（或切换路由组件或 v-show 是否显示等），这个组件从页面上被销毁的过程就是离开阶段。

进一步理解

结合上图和表格一起看，x-xx-active 代表着 x-xx-from 和 x-xx-to 之间的持续阶段。比如，组件（元素或标签）进入的阶段是 from 到 to 之间的持续阶段，即 v-enter-active。在这个阶段里，就是要对这个进入动画定义动画持续时间、延迟等。

假如，我进入房间到床上这一过程就是进入阶段，这一阶段我的速度是如何的？在 active 中进行定义。开门时我是什么状态；到床上我最后又是什么状态，即 from 和 to 的阶段。

离开阶段

<template>
  <button @click="show = !show">Click</button>
  <Transition>
    <p v-if="show">Hello Vue!</p>
  </Transition>
</template>

<style scoped>
.v-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-leave-from {
  transform: translateX(0px);
  opacity: 1;
}

.v-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>

<Transition>内置组件中包裹了一个 p 标签。当我们点击按钮时，若 show 是 false，那么该标签从页面上消失，即离开阶段，也就是 v-leave-to、v-leave-from、v-leave-active。

进入阶段

p 标签从页面中渲染，即进入阶段，也就是 v-enter-to、v-enter-from、v-enter-active。

.v-enter-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-enter-from {
  transform: translateX(100px);
  opacity: 0;
}

.v-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

完整过渡

重命名过渡

上面的所有案例都是 v-xx-xx，这个 v 是默认的过渡类名，给<Transition>添加一个 name 属性，对过渡类名进行重命名，替换 v：

rawProps 代表组件的属性（attribute），组件有 12 个属性。修改 name 就能替换掉默认的类名。修改第 4 ~ 12 个属性就能够完全自定义类名。但是，每一个对应的阶段所发生的动画效果不会有影响。

<Transition name="fade"></Transition>

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

自定义过渡

如果只是对过渡组件添加一个属性 name，只能修改前缀名。如上一小节所述，后缀名也是可以修改的，而只需要在对应的过渡阶段上添加对应的属性（props）即可：

1. enter-from-class
2. enter-active-class
3. enter-to-class
4. leave-from-class
5. leave-active-class
6. leave-to-class

这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用：

<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight">
  <p v-if="show">Hello Vue!</p>
</Transition>