Vue router-view 路由无缝切换动画,左滑淡出,右滑淡入。
HTML:
<div class="wrap">
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
CSS:
/* 自定义切换动画 */
/* 元素刚进入的状态 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(-10px);
}
/* 被激活时 */
.v-enter-active {
transition: all 0.3s;
}
/* 元素完全进入后的状态 */
.v-enter-to,
.v-leave {
opacity: 1;
transform: translateX(0px);
}
/* 元素离开前的状态 */
/* .v-leave {
transform: translateX(0px);
opacity: 1;
} */
.v-leave-active {
transition: all 0.3s;
}
/* 元素离开后的状态 */
/* .v-leave-to {
opacity: 0;
transform: translateX(-30px);
} */