开发者学堂课程【Vue.js 入门与实战：组件切换-应用切换动画和mode方式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8182
组件切换-应用切换动画和 mode方式
当前组件已经可以实现正常切换，但是组件切换时有些突兀，这是需要添加动画来解决。
搜 vue.js，点击起步，找到动画，多个组件的过渡，
多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件：
<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component>
</transition>
只需要 component 用 Transform 包起来。使用如下代码实现：
第一步：
<transition>
<component :is=＂comName＂></component>
</transition>
第二步：
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px);
}
.v-enter-active,
.v-leave-active{
Transition: all 0.5s ease:
</style>
</head>
此时执行会发现，有实现切换，但是有阴影出现。需要通过设置使其消失，此时应该写成：
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(150px);
}
.v-enter-active,
.v-leave-active{
Transition: all 0.5s ease:
opacity:0;
transform:translateX(150px);
}
<transition mode=＂out-in＂>
</transition>
</style>
</head>
<这是 mode 属性，设置组件切换时候的 模式>
