nuxt 页面过渡效果配置，一篇文章讲清楚

江湖文人
35 阅读4分钟

用Vue或原生浏览器视图过渡API在页面和布局之间应用过渡效果。

页面过渡

可以启用过渡，为所有页面自动应用过渡效果。

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
      pageTransition: { name: 'page', mode: 'out-in' }
  },
})

同时更改了布局和页面，此处设置的页面过渡不会运行。相反，应该设置布局过渡。

要在页面之间添加过渡效果，请在app.vue中添加以下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>

1.gif

要为某个页面设置不同的过渡效果，可以在该页面的definePageMeta中设置pageTransition键：

// pages/about.vue
<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'rotate'
  }
})
</script>

访问“关于”页面时将添加3D旋转效果：

1.gif

布局过渡

可以启用布局过渡，为所有布局自动应用过渡效果。

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
      layoutTransition: { name: 'layout', mode: 'out-in' }
  },
})

在页面和布局之间添加过渡效果，请在app.vue中添加以下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>

// layouts/default.vue

<template>
  <div>
    <pre>默认布局</pre>
    <slot />
  </div>
</template>

<style scoped>
div {
  background-color: lightgreen;
}
</style>

// layouts/orange.vue

<template>
  <div>
    <pre>橙色布局</pre>
    <slot />
  </div>
</template>

<style scoped>
div {
  background-color: #eebb90;
  padding: 20px;
  height: 100vh;
}
</style>

// pages/index.vue

<template>
  <div>
    <h1>首页</h1>
    <NuxtLink to="/about">关于页面</NuxtLink>
  </div>
</template>

// pages/about.vue

<script setup lang="ts">
definePageMeta({
    layout: 'orange'
})
</script>

<template>
  <div>
    <h1>关于页面</h1>
    <NuxtLink to="/">首页</NuxtLink>
  </div>
</template>

1.gif

与pageTransition类似，可以用definePageMeta为页面组件应用自定义layoutTransition: // pages/about.vue

<script setup lang="ts">
definePageMeta({
  layout: 'orange',
  layoutTransition: {
    name: 'slide-in'
  }
})
</script>

全局设置

可以使用nuxt.config全局自定义这些默认过渡名称。

pageTransition和layoutTransition键接受TransitionProps作为JSON可序列化的值，可以在其中传递name、mode和其他有效的自定义CSS过渡属性。

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in' // 默认值
    },
    layoutTransition: {
      name: 'slide',
      mode: 'out-in' // 默认值
    }
  }
})

如果更改了name属性，还要相应地重命名CSS类。

要覆盖全局过渡属性，可以用definePageMeta为单个Nuxt页面定义页面或布局过渡，并覆盖在nuxt.config文件中全局定义的任何页面或布局过渡。

// pages/some-page-vue

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'bounce',
    mode: 'out-in' // 默认值
  }
})
</script>

禁用过渡

可以为特定路由禁用pageTransition和layoutTransiton:

// pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  pageTransition: false,
  layoutTransition: false
})
</script>

或在nuxt.config中全局禁用：

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

JavaScript 钩子

对于高级用例，可以用JavaScript钩子为Nuxt页面创建高度动态和自定义的过渡效果。

这种方式经常用在GSAP这个JavaScript动画库上。

// pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('进入之前...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {}
  }
})
</script>

关于Transition组件中可用的JavaScript钩子

动态过渡

要用条件逻辑应用动态过渡，可以用内联中间件为to.meta.pageTransition分配不同的过渡名称。

// pages/[id].vue
<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-lfe' : '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;
  tranfrom: translate(50px, 0);
}
</style>

// 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>

页面现在会在前往下一个id时应用slide-left过渡，前往上一个id时应用slide-right:

1.gif

使用NuxtPage的过渡

当在app.vue中使用<NuxtPage />时，可以通过transition属性配置过渡效果，以全局启用过渡。

// app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage :transition="{
        name: 'bounce',
        mode: 'out-in'
      }" />
    </NuxtLayout>
  </div>
</template>

这种页面过渡无法通过单个页面上的definePageMeta覆盖。

视图过渡API（实验性）

Nuxt提供了一个实验性的视图过渡API实现。可以实现原生浏览器过渡效果，尤其是在不同页面上无关元素之间的过渡。

nuxt-view-transitions.surge.sh/movie/20225…

上面这个地址是效果的演示效果。

Nuxt的集成正在积极开发中。科目一通过配置文件中的experimental.viewTransition选项启用：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

可能的值为：false、true或者always。

如果设置为true，Nuxt会在用户浏览器匹配prefers-reduced-motion: reduce时不应用过渡（推荐）。如果设置为always，Nuxt将始终应用过渡，由你来决定是否尊重用户的偏好。

默认情况下，视图过渡对所有页面启用，但你可以设置不同的全局默认值。

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    // 全局禁用视图过渡，按页面逐个启用
    viewTransition: false
  }
})

可以通过在页面的definePageMeta中设置viewTransition键来覆盖默认的viewTransition值：

// pages/about.vue
<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

按页面覆盖视图过渡仅在启用experimental.viewTransition选项时有效。

如果你同时用Vue过渡去实现与新视图过渡API相同的结果，可以希望在用户浏览器支持较新的原生Web API时禁用Vue过渡。可以通过创建~/middleware/disable-vue-transitions.global.ts并提那家以下内容来实现：

export default defineNuxtRouteMiddleware(to => {
  if(import.meta.serve || !docuemnt.startViewTransition) { return }
  
  // 禁用内置 Vue 过渡
  to.meta.pageTransition = false
  to.meta.layoutTransition = false
})
avatar
文章
阅读
粉丝