Vue3+Ts+Vite项目(第八篇)——页面切换过渡动画

一、先看效果

二、全量代码

<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 过渡动画并不支持，要实现过渡动画的页面，都需要有一个根标签包裹页面内容，否则就会报如下警告: