vue导航切换过渡动画transition的使用_van-transition-优快云博客

本文链接：https://blog.youkuaiyun.com/Hello__World123/article/details/100741349

本文详细介绍了Vue中使用transition组件实现导航切换过渡动画的方法，包括过渡的CSS类名定义及动态设置name属性实现左右切换效果，同时解释了过渡模式in-out和out-in的区别。

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

vue导航切换过渡动画transition的使用

过渡的css类名：
v-enter：定义进入过渡的开始状态
v-enter-active：定义进入活动状态
v-enter-to：定义进入结束状态
v-leave：定义离开过渡的开始状态
v-leave-active：定义离开活动状态
v-leave-to：定义离开结束状态

例如：

html:
<transition>
	<router-view></router-view>
</transition>

css:
.v-enter {
	opacity:0;
}
.v-enter-to {
	opacity:1;
}
.v-enter-active {
	transition:1s;
}
.v-leave{
	opacity:1;
}
.v-leave-to {
	opacity:0;
}
.v-leave-active {
	transition:1s;
}

过渡模式：

in-out：新元素先进行过渡，完成之后当前元素过渡离开
out-in：当前元素先进行过渡，完成之后新元素过渡进入

过渡模式设置：

<transition model="in-out"></transition>

动态设置name属性左右切换：

html:
<transition name="left">
	<router-view></router-view>
</transition>

css:
.left-enter {
	transform: translateX(100%);
}
.left-enter-to {
	transform: translateX(0);
}
.left-leave{
	transform: translateX(0);
}
.left-leave-to {
	transform: translateX(-100%);
}
.left-leave-active,.left-enter-active {
	transition:1s;
}

设置了name属性，标签会自动寻找以“left”开头的css类名。

插点题外话，什么是路由元信息？
在路由配置中meta可以配置一些数据，用在路由信息对象中。
访问meta数据，可以用$route.meta。