文章目录
一、先看效果
二、全量代码
<template>
<!-- 设置路由出口 -->
<router-view v-slot="{ Component, route }">
<transition name="animation" mode="out-in">
<component :is="Component" :key="route.path" />
</transition>
</router-view>
</template>
<style lang="scss">
/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
transform: translateX(20px);
opacity: 0;
}
.animation-enter-to,
.animation-leave-from {
opacity: 1;
}
.animation-enter-active {
transition: all 0.7s ease;
}
.animation-leave-active {
transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>
三、注意事项
虽然Vue3支持
template下存在多个根节点，但是transition 过渡动画并不支持，要实现过渡动画的页面，都需要有一个根标签包裹页面内容，否则就会报如下警告:
