vue使用transition切换页面过渡动画，并解决切换组件时产生的空白

name属性

如果使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 transition-enter。

mode属性

out-in 当前元素先进行过渡，完成后新元素过渡进入
in-out 新元素元素先进行过渡，完成后当前元素过渡离开

class属性

v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to

举例

template

<transition name="slide" mode="out-in">
    <tab1 v-show="displayTab1"></tab1>
</transition>
<transition name="slide" mode="out-in">
    <tab2 v-show="displayTab2"></tab2 >
</transition>

style

.screen-container{
    position: relative;
    width: 100%;
    height: 100%;
}
.slide-enter-active,
.slide-leave-active{
    transition: all 1s ease;
    position: absolute;//脱离文档流，解决组件切换时产生的空白
}
.slide-enter{
    transform: translateX(100%);
    opacity: 0;
}
.slide-leave-to{
    transform: translateX(-100%);
    opacity: 0;
}

正常：

未脱离文档流产生空白：