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>