开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

在我们使用vue的开发过程中，你可能或多或少的用过Transition标签，它可以帮助我们更加方便的制作相应的过渡动画，但如果只是会使用的话，当遇到问题的时候，显然是不够的，今天我们先就其过渡动画的开始到结束先做一个简单的了解吧。

过渡阶段

css的过渡class从进入到离开之间经历三个大阶段：

• 起始阶段

  • v-enter-from：进入动画的起始阶段。在元素插入前添加，插入完成后移除。
  • v-leave-from：离开动画的起始阶段。在离开过渡动画触发时立即添加，一帧后 移除。

• 生效阶段

  • v-enter-active：进入动画的生效阶段。在元素插入前添加，在进入过渡动画完成后移除。
  • v-leva-active：离开动画的生效阶段。离开过渡效果触发前添加，完成之后移除。

这个阶段的两个动画可以说是我们使用最频繁的，因为进入离开动画的持续时间、延迟以及速度曲线等都是在这一阶段声明的。

• 结束阶段
  • v-enter-to：进入动画的结束阶段。在元素插入完成后添加，过渡动画完成后移除。
  • v-enter-to：离开动画的结束阶段。离开过渡动画触发后添加，其完成后移除。

通过在如上那些阶段声明相应的过渡动画属性，我们就可以更好的进行控制了。

当然，我们可以自定义我们的过渡class名字，而不是使用默认以 v 为开头的前缀。只需要给<Transition>组件传递一个name 的prop，就可以改变过渡class的前缀了。就像如下这样，我们传递一个fade内容的prop：

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}