过渡效果在交互体验中的重要性不言而喻。以往我们使用jQuery添加或移除元素的类，搭配CSS中定义好的样式，再引用一些JavaScript库之后，可以做出非常复杂、惊艳的动态效果，不过这一套方法仍略显烦琐。Vue.js内置了一套过渡系统，可以在元素从 DOM中插入或移除时自动应用过渡效果。Vue.,js会在适当的时机触发CSS 过渡或动画，用户也可以提供相应的JavaScript钩子函数在过渡过程中执行自定义DOM操作。

8.1 单元素组件过渡和动画

过渡效果就是在DOM元素进行切换、隐藏、插入和移除的时候加入一些酷炫的效果，使得过渡更加自然和美观，那么要想让组件实现动画，最基础的做法就是：

应用过渡效果，在需要加动画的地方，加入transition标签。代码示例如下:

transition特性可以与以下资源一起搭配使用:

• v-if
• v-show
• v-for(v-for（只在插入和删除时触发，使用vue-animated-list插件)
• 动态组件（见“组件”一章)

8.1.1 初步Vue动画实例

我们先来看个简单基础的动画案例，大家看案例代码：

例8-1 Demo0801.html

切换

程序的运行结果如下：

图 8- 1 入门案例

点击切换按钮，我们看到div框有一个淡入淡出的效果，原理如下：

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

在案例中我们使用到了一些过渡的类名，现在来看看，在元素在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

图 8- 2 过渡类名

特别说明，对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

8.1.2 CSS过渡

我们常用的过渡都是使用 CSS 的样式规则实现过渡，借助css的样式实现酷炫的过渡效果。

我们来看8-2案例代码：

例8-2 Demo0802.html

切换

程序的运行结果跟例子8-1的区别是在水平位置上的偏移实现了平滑的过渡。我们可以借鉴之前学习的transform属性，灵活使用，还可以加入更多的样式规则，实现想要的效果。

在这我们需要注意，入场类名有三个：

-enter:入场前

-enter-active:入场持续的过程

-enter-to:入场的结束

出场类名有三个：

-leave:出场前

-leave-active:出场持续的过程

-leave-to:出场的结束

8.1.3 CSS过渡原理

在上一小节中，我们初步了解了Vue使用transition标签实现过渡的效果，接下来我们来看看具体的实现过程，以及原理。

首先，我们来看以下代码：

显示/隐藏

上面的代码我们只定义了进入前的类，以及进入的持续过程，我们通过过程看原理：

当动画执行的一瞬间，会在内部的div上增加两个class名字，分别是fade-enter和fade-enter-active，之所以是fade-开头，是因为transiton标签name是fade。当动画运行到第二帧的时候，Vue又会帮助你把fade-enter删除，然后添加一个fade-enter-to，再当动画执行到结束的一瞬间，又把fade-enter-active和fade-enter-to删除掉。

注意，在第一帧的时候，fade-enter-active和fade-enter同时存在，并且opacity=0，在第二帧的时候，fade-enter被删除，opacity恢复到原来的初始状态，就是1，在这个过程中，opacity发生了变化，所以fade-enter-active就让这个变化在3秒内完成，完成后进入到fade-enter-to的状态，但是我们没有定义则默认就是过程持续后的状态，opacity为1，此时进入的过渡状态已经完成，删除fade-enter-to和fade-enter-active，这就是元素进入的一个完整的过程。

但是如果要加入fade-enter-to,需要注意下图所示：

如果初始定义中没有加宽和高，则进入动画完成后，该div就会消失，所以最好在这定义好div的样式规则

width height

如果想要某个样式规则在过渡中有效果，就必须写在-enter中也加入，不能只在#app div的初步定义中写，否则在接下来的active和enter-to中则无效。

以上讲解入场的过程原理，接下来看出场的过程原理：

加入以下代码：

#app {
      text-align: center;
}
#app div {
      margin: 30px auto;
      background-color: bisque;
      width: 200px;
      height: 200px;
}
.fade-enter {
      opacity: 0;
      width: 200px;
      height: 200px;
}
.fade-enter-active {
      transition: opacity 1s, width 1s, height 1s;
}
.fade-enter-to {
      border: 1px solid red;
      width: 100px;
      height: 100px;
}
.fade-leave {
      opacity: 0.5;
      width: 50px;
      height: 50px;
}
.fade-leave-active {
      transition: opacity 2s, width 2s, height 2s;
}
.fade-leave-to {
      opacity: 0;
      width: 200px;
      height: 200px;
}

我们发现，进入效果完成后，我们定义了离开过渡的开始状态fade-leave,在data中show的值为false时，开始离开，此时会为类加上fade-leave和fade-leave-active状态，离开的持续过程完成后，进入结束状态fade-leave-to，此时fade-leave已经被删除，出场完成后，fade-leave-active和fade-leave-to被删除。

整个过程总结如下：

【v-enter】

定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除

【v-enter-active】

定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数

【v-enter-to】

定义进入过渡的结束状态。在元素被插入一帧后生效(与此同时 v-enter 被删除)，在 transition 或 animation 完成之后移除

【v-leave】

定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除

【v-leave-active】

定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition 或 animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数

【v-leave-to】

定义离开过渡的结束状态。在离开过渡被触发一帧后生效(与此同时 v-leave 被删除)，在 transition 或 animation 完成之后移除

以上就是我们整个过渡的过程和原理，接下来我们来看动画。

8.1.4 CSS动画

上一小节，我们实现了CSS过渡，通常过渡使用的是transition,本节课我们使用animation来加入动画效果。

例8-3 Demo0803.html

14. 显示/隐藏
15.