<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>
