你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。
Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。
一、页面过渡效果
你可以启用页面过渡效果，以便对所有页面应用自动过渡效果。nuxt.config.js
export default defineNuxtConfig({
app: {
pageTransition: {
name: 'fade',
mode: 'out-in'
}
}
})
如果在布局和页面中设置了过渡效果，则在此处设置的过渡效果对那些页面将不再生效。
要在页面之间添加过渡效果，请进行以下配置：
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>
pages/index.vue
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
pages/about.vue
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
切换导航时的效果：
要为页面设置不同的过渡效果，可以在页面中使用 definePageMeta设置pageTransition：
app.vue
<template>
<NuxtPage />
</template>
<style>
/* ..其他过渡.. */
.rotate-enter-active,
.rotate-leave-active {
transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
opacity: 0;
transform: rotate3d(1, 1, 1, 15deg);
}
</style>
pages/about.vue
<script setup>
definePageMeta({
pageTransition: {
name: 'rotate'
}
})
</script>
切换到关于页面将添加 3d 旋转效果：
二、布局过渡效果
你可以启用布局过渡，以便对所有布局应用自动过渡。nuxt.config.js
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
要在页面之间添加过渡效果，请进行以下配置：
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>
layouts/default.vue
<template>
<div>
<pre>default layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: lightgreen;
}
</style>
layouts/orange.vue
<template>
<div>
<pre>orange layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: #eebb90;
padding: 20px;
height: 100vh;
}
</style>
pages/index.vue
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'orange'
})
</script>
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
页面导航效果预览：
当然你也可以使用以下方法将自定义应用于页面组件：
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'orange',
layoutTransition: {
name: 'slide-in'
}
})
</script>
三、全局过渡效果
nuxt.config.jsexport default defineNuxtConfig({
app: {
pageTransition: {
name: 'fade',
mode: 'out-in' // default
},
layoutTransition: {
name: 'slide',
mode: 'out-in' // default
}
}
})
要覆盖全局过渡属性，请使用定义单个 Nuxt 页面的页面或布局过渡，并覆盖在 file 中全局定义的任何页面或布局过渡。
pages/some-page.vue
<script setup>
definePageMeta({
pageTransition: {
name: 'bounce',
mode: 'out-in' // default
}
})
</script>
四、禁用过渡效果
特定页面禁用过渡pages/some-page.vue
<script setup>
definePageMeta({
pageTransition: false,
layoutTransition: false
})
</script>
全局禁用过渡效果
nuxt.config.js
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false
}
})
五、JavaScript 钩子
对于高级用例，你可以使用 JavaScript 挂钩为你的 Nuxt 页面创建高度动态和自定义的过渡。这种方式为 JavaScript 动画库提供了完美的用例。pages/some-page.vue
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'custom-flip',
mode: 'out-in',
onBeforeEnter: (el) => {
console.log('Before enter...')
},
onEnter: (el, done) => {},
onAfterEnter: (el) => {}
}
})
</script>
六、动态过渡
要使用条件逻辑应用动态转换，可以利用内联中间件使用 `to.meta.pageTransition`进行判断。layouts/default.vue
<script setup lang="ts">
const route = useRoute()
const id = computed(() => Number(route.params.id || 1))
const prev = computed(() => '/' + (id.value - 1))
const next = computed(() => '/' + (id.value + 1))
</script>
<template>
<div>
<slot />
<div v-if="$route.params.id">
<NuxtLink :to="prev">⬅️</NuxtLink> |
<NuxtLink :to="next">➡️</NuxtLink>
</div>
</div>
</template>
pages/[id].vue
<script setup>
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>
页面过渡效果：
七、使用 NuxtPage 进行过渡
你可以使用 prop 配置 transitions 以全局激活 transitions。app.vue
<template>
<div>
<NuxtLayout>
<NuxtPage :transition="{
name: 'bounce',
mode: 'out-in'
}" />
</NuxtLayout>
</div>
</template>
注意，在单个页面上使用 definePageMeta不能覆盖此页面过渡效果。
好了，分享结束，谢谢点赞，下期再见！
