vue3学习——router-view 过渡动画

虽然vue3说建vue页面不用包裹一个根节点，但是transition不能没有唯一的标签

所以还是得包一层~ o(￣▽￣)o

	<el-main>
        <router-view v-slot="{ Component, route }">
          <transition name="MainFade" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
      </el-main>
      
  .el-main {
    /* 渐变设置 */
    .MainFade-enter-from,
    .MainFade-leave-to {
      transform: translateX(20px);
      opacity: 0;
    }
    .MainFade-enter-to,
    .MainFade-leave-from {
      opacity: 1;
    }
    .MainFade-enter-active {
      transition: all 0.7s ease;
    }
    .MainFade-leave-active {
      transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
    }
  }

例如：
home.vue

<script setup lang="ts"></script>

<template>
  <div>home</div> // 根元素，包层div
</template>

<style scoped></style>