持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

前言

当我们想要给某些节点制作过度动画时，除了通过CSS class或行内样式以外，vue还给我们提供另外两种内置组件，帮助我们制作相应的动画。

一个是 <Transiton>，可以在DOM元素或组件进入和离开时应用动画。

一个是 <TransitonGroup>，可以在 v-for 列表中的元素或组件插入、移动或删除时应用动画。

今天我们先来介绍一下 Transiton。

`<Transiton>`

<Transiton>是一个vue内置的组件，他不需要声明注册，就可以在任意组件中进行使用。并且会把进入和离开动画通过默认插槽的形式传递并应用到内部的元素或组件上。

它可以通过以下几种形式触发进入和离开的动画：

下面我们通过代码的显示来具体体验一下。

<button @click="visible = !visible">切换</button>
<Transition>
  <span v-if="visible">内容</span>
</Transition>

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

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

这样我们就完成了一个简单的过渡动画了。不过有一点需要注意的是，<Transition>只支持单个元素或组件作为其插槽内容，而如果是组件的话，必须是仅有一个根元素。

使用 <Transiton>制作动画时，我们可以通过基于CSS来实现过度效果，也可以通过其暴露出的钩子函数来实现，或者两者结合也是可以的。不过，有一点我们要明白，当 <Transiton> 内部的元素进入或离开时，会经历如下几个步骤：