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

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

时间：2021-09-29 13:35:56

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/>起作用

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:表示进入过渡（entering）的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

3.v-leave:离开过渡（leave）的开始那一刻。在离开过渡被触发时生效，在下一个帧移除，也是一瞬间的事。

4.v-leave-active：离开过渡（leaving）的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

看文字看不懂没关系，用图来解释可能会直观一点。

假设一个被<transition/>组件包含的节点从隐藏到显示（称之为进入过渡），它会被依次添加一些类class，如图：

反之，如果是从显示到隐藏（称之为离开过渡），它会被依次添加一些类class，如图：

注意：.v-enter中的v-只是前缀，如果我们<transition/>组件的name值为box，那么它实际的class为 .box-enter。

既然Vue给我们提供了这些class类，我们就可以编写这些class的内容来实现我们想要的过渡效果了。

实战小案例

讲到这里，似乎还似懂非懂，总感觉理解的不是很透彻，当然，还没动手敲一遍，怎么会透彻，那接下来我们再来一个例子演示一遍。

我们先来看看要实现的案例效果（如下图），再一步一步来实现它。

(我是gif，加载有点慢)

首先，先引入我们的vue.js文件，这里就不演示了。

我们先用html布局：

<div id="app"class="app">

<button class="btn">切换</button>

<div class="container">

<div class="box"></div>

</div>

Javascript部分：

<script>

constapp= new Vue({

el:"#app",

data:{

showBox:false

}

});

</script>

相信学过《Vue2.0基础系列》的同学看上面这两段代码应该是毫无压力了。CSS样式布局就不展示，无非是定义各个节点的宽高颜色罢了。

上面data中的showBox的值默认是为fasle，我们来修改代码，实现点击切换box节点的显示/隐藏。

代码稍做修改：

<button

@click="showBox = !showBox"

class="btn">

切换

</button>

给<button/>组件添加vue的点击事件处理程序，每次点击“切换”按钮的时候将showBox的值取反，就能实现box元素的显示/隐藏，非常好理解。

我们顺便打开开发者工具，找到Vue面板：

我们来看看切换的效果：

（我是gif，加载有点慢）

通过Vue调试面板我们可以看到，当我们不断点击的时候，showBox的值不断的取反，而页面的效果也是在我们的预料之中，box元素节点不断在显示和隐藏之间切换。但是，box节点只是简单生硬的切换隐藏/显示，并没有任何过渡效果。

当然啦，因为最重要的<transition/>组件我们还没用上呢？

接着我们再修改代码：

<transition name="box">

<div v-show="showBox"class="box">

i am the box

</div>

</transition>

我们看到，原来的box节点元素，现在嵌套在了<transition/>组件的内部，并且name属性的值为box。当我们的showBox再取反的时候，Vue就会在适当的时候添加相应的class类名了。

比如，当它进入过渡的时候（隐藏→显示），就会依次发生：

1. 添加.box-enter

2. 删除.box-enter，添加 .box-enter-active

3. 删除.box-enter-active

当它离开过渡的时候（显示→隐藏），就会依次发生：

1. 添加.box-leave

2. 删除.box- leave，添加 .box- leave-active

3. 删除.box- leave -active

有了这些class，我们就可以根据自己的需要，给它们添加内容。

/*box节点本身的样式*/

.box{

width:100%;

height:100%;

text-align:center;

line-height: 200px;

background: #ff8282;

color: #Fff;

/*以下两个默认值，可不写*/

/*写上只是为了便于讲解，记住这两个*/

opacity: 1;

margin-left: 0;

}

提示：这是box节点原本的样式，最后两个CSS属性的是都是默认值，写出来是为了便于后面的理解。

我们需要定义进入和离开过渡动画效果，这里用到了CSS3的transition属性。

.box-enter-active,.box-leave-active{

transition:all.8s;

}

这里的transition表示 box节点所有属性的变化都会运用此过渡效果，过渡时间为0.8秒，是CSS3中transition属性的知识。

然后我们再设置进入过渡（entering）的样式，因为我们想要的效果是box节点从右往左滑动进入，并且透明度由浅到深，所以一开始那一刻的样式设置为：

.box-enter{

opacity: 0;

margin-left: 100%;

}

当进入下一帧的时候，.box-enter立刻被删除，opactity的值由0变成上面定义的默认值：1，margin-left的值由100%变成上面定义的默认值：0，与此同时也添加了.box-enter-active，正因为.box-enter-active里面的transition属性定义了过渡效果，所以，属性的变化达到了慢慢过渡的效果。

而离开过渡（leaving）的时候，是从左到右滑动离开的，并且透明度也是由深到浅，直到透明。所以离开过渡一开始那一刻的样式和默认样式一样，我们无需重复定义。

而离开过渡（leaving）最后的一刻的样式是：

.box-leave-active{

opacity: 0;

margin-left: 100%;

}

跟.box-enter的样式一样，进入那一刻从右边进场，最后离开完成那一刻，回到了右边。（从哪里来，会哪里去）

最后我们看看效果，是不是我们想要的：

（我是gif，加载有点慢）

完美，成功地运用Vue给开发者提供的<transition/>组件实现了过渡效果。

本节总结

理解Vue的<transition/>组件，配合CSS3的动画知识，就能随心所欲地写出你想要的效果。