在网站开发过程中，为了优化用户体验，有时候需要在页面之间加入转场动画效果，Nuxt3利用Vue的<Transition>组件在页面和布局之间实现过渡效果。

1，启用页面转换过渡效果，以便为所有页面应用自动转换：

export default defineNuxtConfig({

	app: {
		pageTransition: { name: 'page', mode: 'out-in' }
	}
})

2，在app.vue添加CSS转场动画代码：

.page-enter-active,
.page-leave-active {
	transition: all 0.5s ease;
}

.page-enter-from {
	opacity: 0;
	filter: blur(3px);
}

.page-leave-to {
	opacity: 0;
	filter: blur(3px);
}

完成以上两步，就成功在页面之间实现了过渡效果。

如果要为某个页面设置不同的转换，可以在页面的definePageMeta中设置pageTransition键:

definePageMeta({
	pageTransition: {
		name: 'rotate'
	}
})