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

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