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

最新推荐文章于 2025-04-29 22:18:49 发布

前端小悸动

最新推荐文章于 2025-04-29 22:18:49 发布

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_41884425/article/details/121995122

版权

这篇学习笔记介绍了如何在Vue3后台管理系统中实现单页面路由切换时的transition动画，强调了动画效果应避免页面卡顿和白屏问题。内容提到不要将动画代码放在app.vue文件中，而应放在具体页面中，并提供了相应的CSS和transition代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此处代码示例为后台管理单页面挂载在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:

最低0.47元/天解锁文章