前言

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

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

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

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

<Transiton>

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

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

• v-if 触发的内容切换。

• v-show 触发的内容切换。

• <component>切换组件触发的内容切换。

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

<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> 内部的元素进入或离开时，会经历如下几个步骤：

• 首先 Vue 会自动检测其内部元素是否声明了 CSS 的过渡动画，如果有的话，会自动给其进行添加或移除。

• 其次，如果有绑定相应的钩子函数的话，也会进行相应的调用。

• 如果以上都没有的话，元素的进入和离开操作，将在下一个动画帧后进行执行。