Nuxt3入门：过渡效果（第5节）

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

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.js

export 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不能覆盖此页面过渡效果。

好了，分享结束，谢谢点赞，下期再见！