【vue2.0进阶篇】用transition组件轻松实现过渡效果

Vue系列连载又继续了，公众号和微信号都接到了伙伴们的催更，最近忙于工作，没来得及时更新《Vue2.0进阶》的教程文章，大家久等了。

 

这一节我们来学习如何利用Vue提供的transition组件实现一些过渡效果，同时利用上一节《Vue开发调试神器Vue-devtools》来帮助我们调试，这也是为什么要先学习Vue-devtools的原因。

 

实现过渡的动画效果已经不是什么稀奇的事，是每一个前端开发者都要必备的技能。在不依赖第三方框架的库的前提下，实现动画最简单的办法就是使用CSS3给我们提供的属性。这一节，我们将会使用CSS3的transition属性来实现我们的想要的效果。

 

如果还没了解CSS3的transition属性的小伙伴可以事先去了解一下，如果一时半会实在没条件（正在挤地铁呢）去查阅transition属性，可以继续往下看，前端君会穿插着讲一些transition属性的内容。

 

除了CSS3的transition属性，Vue提供的组件也叫transition，可别混淆了，它们是两个不同的东西，仅仅是长得一样罢了。

<transition/>组件

 <transition/> 组件的写法：

 <transition name="box"></transition>

我们会给 <transition/> 组件添加一个属性name，我们取名为box。

 

然后呢，然后怎样才会有动画效果呢， <transition/> 组件什么时候才能起作用呢？

<transition/>起作用

Vue提供的 <transition/> 组件，会在下列四种情况下起作用：

    1. 条件渲染（使用v-if）

    2. 条件展示（使用了v-show）

    3. 动态组件

    4. 组件根节点

 

在上述的任意一种情况发生的时候（比如：v-show的值为true切换成false的时候），我们可以给 <transition/> 组件包含的节点元素添加entering/leaving过渡动画效果。

 

那我们如何添加我们想要的过渡效果呢？

 

过渡原理分析

原来，当一个被 <transition/> 组件包含的节点出现了以上的4种情况的任意一种的时候，Vue自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

 

所谓的：“在恰当的时机添加/删除 CSS 类名”，其实是：

1.v-enter：进入过渡效果（enter）刚刚开始那一刻。在元素被插入或者show的时候生效，在下一个帧就会立刻移除，一瞬间的事。

 

2.v-enter-active: <