学习笔记-Vue-1 Vue3后台管理单页面路由切换transition动画

 此处代码示例为后台管理单页面挂载在el-main中，懒加载，不要写在app.vue文件中，否则不生效

        小提示：查过很多资料都是使用watch 监听$router的变化，如果to索引大于from索引,判断为前进状态,反之则为后退状态，但是无法判断同级路由的切换且页面切换卡顿有白屏现象。

这里只要渲染的页面切换就加载transition动画

        <el-main>
                <router-view class="router-view" v-slot="{ Component }">
					<transition :name="transitionName" mode="out-in">
						<keep-alive>
							<component :is="Component" />
						</keep-alive>
					</transition>
				</router-view>
        </el-main>

  data() {
    return {
        transitionName: "slide-left"
    }
  },

 

 css代码与transition代码在同一个页面中

.slide-left-enter-from {
	transform: translateX( -20px);
	opacity: 0;
}
 
.slide-left-enter-to {
	transform: translateX(0px);
}
 
.slide-left-leave-from {
	transform: