vue3的页面切换动画 vue3！vue3！vue3！

重点： vue2的进入/离开 直接-enter就好了，vue3的需要 -enter-from 其他的都一样；

html代码

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

script的data

routerTime: 0,
transitionName: "slide-left"

css代码

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

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

.slide-left-leave-from {
	transform: translateX(0);
}

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

.slide-left-enter-active,
.slide-left-leave-active {
	transition: all 0.3s;
}