前言
上一篇使用component元素实现组件切换，但是没有切换的动画效果。那么可以参考官网的例子，实现一下组件切换的动画，以及mode效果设置。
官网说明：多个组件的过渡
多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件：
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
}).component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}从上面官网的例子中，写这个组件切换的动画效果例子，主要由以下几个步骤写起来，如果单纯这样看一个最终写完的示例，可能不太清楚里面的道理。
步骤如下：
- 编写使用
component切换组件的功能，完成基本的切换效果 - 使用
transition包括component组件，并命名name为component-fade - 在
css中编写component-fade入场、出场的动画效果 - 最后，加上动画的模式
mode
下面，我再写一个示例，一步步来演示看看。
示例
1.编写使用component切换组件的功能，完成基本的切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app1">
<a href="" @click.prevent=" view='login' ">登陆</a>
<a href="" @click.prevent=" view='register' ">注册</a>
<!-- 使用component设置组件切换 -->
<component :is="view"></component>
</div>
<script>
// 创建登陆组件
Vue.component('login',{
template:'<h1>登陆组件</h1>'
})
// 创建注册组件
Vue.component('register',{
template:'<h1>注册组件</h1>'
})
// 创建第一个Vue的实例
var vm1 = new Vue({
el: '#app1',
data: {
view: "", // 设置切换组件的注册名称
},
})
</script>
</body>
</html>
浏览器显示如下：
- 点击登陆按钮
image-20200210155038337
- 点击注册按钮
image-20200210155056568
可以看到上面已经实现好了组件切换。
2.使用transition包括component组件，并命名name为component-fade
image-20200210162348092
3.在css中编写component-fade入场、出场的动画效果
image-20200210163122258
此时打开浏览器查看动画效果，如下：
image-20200210163211321
两个组件的切换因为位置上下占用，导致一个不平滑的过渡效果。下面的【注册组件】要等到【登陆组件】向右移动消失之后，【注册组件】才会上移。
如果想要两个内容平滑从左到右的变化，那么下面就可以设置mode来实现。
4.加上动画的模式mode
image-20200210175543998
在mode设置中可以设置out-in 和in-out，这里我先设置out-in查看效果如下：
image-20200210182516821
image-20200210182533573
在设置了mode为out-in之后，组件在切换的时候，将会等待【注册组件】消失了之后，才会开始执行【登陆组件】的动画。
那么如果设置in-out呢？
image-20200210182718860
image-20200210182741459
如果使用in-out，那么则会先让新的组件先进入，然后再让旧的组件移除，这个效果并不平滑。所以一般是设置out-in。
更多精彩原创Devops文章，快来关注我的Devops社群吧：
