过渡效果
<Transition>
组件在页面和布局之间应用过渡效果。页面过渡效果
您可以启用页面过渡效果,为您的所有 页面应用自动过渡效果。
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' }
},
})
要开始在页面之间添加过渡效果,请将以下 CSS 添加到您的 app.vue
中
<template>
<NuxtPage />
</template>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
这在页面之间导航时产生以下结果
要为页面设置不同的过渡效果,请在页面的 definePageMeta
中设置 pageTransition
键
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'rotate'
}
})
</script>
移动到 about 页面将添加 3D 旋转效果
布局过渡效果
您可以启用布局过渡效果,为您的所有 布局应用自动过渡效果。
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
要开始在页面和布局之间添加过渡效果,请将以下 CSS 添加到您的 app.vue
中
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
这在页面之间导航时产生以下结果
与 pageTransition
类似,您可以使用 definePageMeta
将自定义 layoutTransition
应用于页面组件
<script setup lang="ts">
definePageMeta({
layout: 'orange',
layoutTransition: {
name: 'slide-in'
}
})
</script>
全局设置
您可以使用 nuxt.config
全局自定义这些默认过渡效果名称。
pageTransition
和 layoutTransition
键都接受 TransitionProps
作为 JSON 可序列化值,您可以在其中传递自定义 CSS 过渡效果的 name
、mode
和其他有效的 transition-props。
export default defineNuxtConfig({
app: {
pageTransition: {
name: 'fade',
mode: 'out-in' // default
},
layoutTransition: {
name: 'slide',
mode: 'out-in' // default
}
}
})
name
属性,您还必须相应地重命名 CSS 类。要覆盖全局过渡属性,请使用 definePageMeta
为单个 Nuxt 页面定义页面或布局过渡效果,并覆盖在 nuxt.config
文件中全局定义的任何页面或布局过渡效果。
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'bounce',
mode: 'out-in' // default
}
})
</script>
禁用过渡效果
pageTransition
和 layoutTransition
可以为特定路由禁用
<script setup lang="ts">
definePageMeta({
pageTransition: false,
layoutTransition: false
})
</script>
或在 nuxt.config
中全局禁用
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false
}
})
JavaScript 钩子
对于高级用例,您可以使用 JavaScript 钩子为您的 Nuxt 页面创建高度动态和自定义的过渡效果。
这种方式为 JavaScript 动画库(如 GSAP)提供了完美的用例。
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'custom-flip',
mode: 'out-in',
onBeforeEnter: (el) => {
console.log('Before enter...')
},
onEnter: (el, done) => {},
onAfterEnter: (el) => {}
}
})
</script>
Transition
组件中可用的其他 JavaScript 钩子的信息。动态过渡效果
要使用条件逻辑应用动态过渡效果,您可以利用内联 middleware 为 to.meta.pageTransition
分配不同的过渡效果名称。
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'slide-right',
mode: 'out-in'
},
middleware (to, from) {
if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
}
})
</script>
<template>
<h1>#{{ $route.params.id }}</h1>
</template>
<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.2s;
}
.slide-left-enter-from {
opacity: 0;
transform: translate(50px, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-enter-from {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate(50px, 0);
}
</style>
现在,当转到下一个 ID 时,页面应用 slide-left
过渡效果,而对于上一个 ID 则应用 slide-right
过渡效果
使用 NuxtPage 的过渡效果
当 <NuxtPage />
在 app.vue
中使用时,可以使用 transition
prop 配置过渡效果以全局激活过渡效果。
<template>
<div>
<NuxtLayout>
<NuxtPage :transition="{
name: 'bounce',
mode: 'out-in'
}" />
</NuxtLayout>
</div>
</template>
definePageMeta
在单个页面上覆盖。视图过渡 API (实验性)
Nuxt 附带了 视图过渡 API 的实验性实现(请参阅 MDN)。这是一种令人兴奋的新方法,可以实现原生浏览器过渡效果,这种效果(除其他外)能够在不同页面上不相关的元素之间进行过渡。
您可以在 https://nuxt-view-transitions.surge.sh 上查看演示,并在 StackBlitz 上查看源代码。
Nuxt 集成正在积极开发中,但可以使用您配置文件中的 experimental.viewTransition
选项启用
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
可能的值为:false
、true
或 'always'
。
如果设置为 true,如果用户的浏览器匹配 prefers-reduced-motion: reduce
(推荐),Nuxt 将不会应用过渡效果。如果设置为 always
,Nuxt 将始终应用过渡效果,是否尊重用户偏好由您决定。
默认情况下,视图过渡效果对所有 页面启用,但您可以设置不同的全局默认值。
export default defineNuxtConfig({
app: {
// Disable view transitions globally, and opt-in on a per page basis
viewTransition: false
},
})
可以通过在页面的 definePageMeta
中设置 viewTransition
键来覆盖页面的默认 viewTransition
值
<script setup lang="ts">
definePageMeta({
viewTransition: false
})
</script>
experimental.viewTransition
选项时才有效。如果您还使用 Vue 过渡效果(如 pageTransition
和 layoutTransition
)(请参见上文)来实现与新的视图过渡 API 相同的结果,那么如果用户的浏览器支持较新的原生 Web API,您可能希望禁用 Vue 过渡效果。您可以通过创建包含以下内容的 ~/middleware/disable-vue-transitions.global.ts
来实现这一点
export default defineNuxtRouteMiddleware(to => {
if (import.meta.server || !document.startViewTransition) { return }
// Disable built-in Vue transitions
to.meta.pageTransition = false
to.meta.layoutTransition = false
})
已知问题
- 如果您在页面设置函数中执行数据获取,您可能需要重新考虑暂时使用此功能。(根据设计,视图过渡效果在发生时会完全冻结 DOM 更新。)我们正在考虑将视图过渡效果限制在
<Suspense>
解析之前的最后时刻,但在过渡期间,如果这描述了您的情况,您可能需要仔细考虑是否采用此功能。