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>