51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<template>
|
||
<!-- 动态绑定 Transition 的 name -->
|
||
<router-view v-slot="{ Component }">
|
||
<transition name="route-fade" mode="out-in" appear>
|
||
<component :is="Component" />
|
||
</transition>
|
||
</router-view>
|
||
|
||
</template>
|
||
<script setup lang="ts">
|
||
</script>
|
||
<style scoped lang="scss">
|
||
/* 过渡动画的 CSS 类（前缀和 Transition 的 name 一致） */
|
||
/* 进入动画开始 */
|
||
.route-fade-enter-from {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
/* 可选：从右侧滑入 */
|
||
}
|
||
|
||
/* 进入动画过程 */
|
||
.route-fade-enter-active {
|
||
transition: all 0.3s ease;
|
||
/* 动画时长和缓动效果 */
|
||
}
|
||
|
||
/* 进入动画结束 */
|
||
.route-fade-enter-to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* 离开动画开始 */
|
||
.route-fade-leave-from {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* 离开动画过程 */
|
||
.route-fade-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 离开动画结束 */
|
||
.route-fade-leave-to {
|
||
opacity: 0;
|
||
transform: translateX(-20px);
|
||
/* 可选：向左侧滑出 */
|
||
}
|
||
</style>
|