<template>
  <router-view v-slot="{ Component,route  }">
    <keep-alive :include="include" :exclude="excludes">
      <transition name="fade-slide" mode="out-in">
        <component :is="Component" :key="route.path" class="w-screen h-screen"/>
      </transition>
    </keep-alive>
  </router-view>
</template>
<script setup lang="ts">
import { excludes } from '@/router/keepAlive'

const include:string[] = []




</script>

<style scoped>
/* 过渡动画：左右滑动并且淡入淡出 */

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: transform 1s ease, opacity 1s ease;
}

/* 进入动画：从右侧进入 */
.fade-slide-enter {
  transform: translateX(100%);
  opacity: 0;
}

/* 离开动画：从左侧离开 */
.fade-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>
