vue3路由切换过渡动画

滑动样式

向右滑动消失，从左侧进入

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component" />
    </transition>
</router-view>

/* 路由切切换动画 - 横向滑动效果 */
.fade-leave-active,
.fade-enter-active {
    transition: all 0.3s;
}

/* 新页面进入动画 */
.fade-enter-from {
    opacity: 0;
    transform: translateX(-5%);
    /* 从左侧侧完全进入 */
}

.fade-enter-to {
    opacity: 1;
    transform: translateX(0);
    /* 滑动到最终位置 */
}

/* 旧页面离开动画 */
.fade-leave-from {
    opacity: 1;
    transform: translateX(0);
    /* 从当前位置开始 */
}

.fade-leave-to {
    opacity: 0;
    transform: translateX(10%);
    /* 向右完全滑出 */
}