组件切换-应用切换动画和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 属性,设置组件切换时候的 模式>