<template>
  <main>
    <!-- <router-view /> -->
    <router-view v-slot="{ Component }">
      <Transition mode="out-in">
        <keep-alive>
        <component :is="Component" />
        </keep-alive>
      </Transition>
    </router-view>
  </main>
</template>

<script setup></script>

<style lang="scss" scoped>
main {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  border: none;
}

.v-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.v-leave-active {
  transition: all 0.5s;
}

.v-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

.v-enter-from {
  transform: translateX(-10px);
  opacity: 0;
}

.v-enter-active {
  transition: all 0.5s;
}

.v-enter-to {
  opacity: 1;
  transform: translateX(0);
}
</style>
