虽然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>