Skip to content

过渡

· 3 min

思考🤔：回顾 Vue3 中如何进行过渡？

<template>
  <div>
    <button @click="show = !show">切换</button>
    <div
      :class="[
        'fade',
        {
          active: show,
        },
      ]"
    >
      <h1>过渡</h1>
      <p>淡入淡出</p>
    </div>
  </div>
</template>


<script setup>
const show = ref(true)
</script>


<style>
.fade {
  opacity: 0;
  transition: 1s;
}
.active {
  opacity: 1;
}
</style>

除此之外，还可以使用 Transition 内置组件，Transition 会在特定的时间挂上或者移除相应的样式类。

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition>
      <div v-if="show">
        <h1>过渡</h1>
        <p>淡入淡出</p>
      </div>
    </transition>
  </div>
</template>


<script setup>
const show = ref(true)
</script>


<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}


.v-enter-from,
.v-leave-to {
  opacity: 0;
}


.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

在 Nuxt 应用中，完全可以使用之前的方式进行过渡。不过 Nuxt 作为上层框架，肯定做了二次封装，用起来肯定是更方便。

快速上手

export default defineNuxtConfig({
  // ...
  app: {
    pageTransition: {
      name: 'fade',
      mode: 'out-in',
    },
  },
})

布局过渡

使用布局过渡有如下几个步骤：

  1. 添加不同的布局，例如在 layouts 目录增加 default.vue 和 other.vue 两种布局方案。

  2. 为不同的页面指定对应的布局方案

  3. 在配置文件增加布局过渡的配置，主要指定布局过渡的名称以及动画模式

  4. 书写对应的过渡样式

全局配置和局部配置

在 Nuxt 配置文件中的过渡配置是全局的，会应用于所有的页面以及布局。在页面中可以通过 definePageMeta 进行局部配置，覆盖全局的配置，从而实现某个页面单独的过渡效果配置。

JavaScript Hooks

Transition 除了通过 CSS 来实现动画以外，还可以通过 JS 钩子写法来实现动画：

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

在 Nuxt 中也是支持 JS 钩子的：

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {},
    onAfterEnter: (el) => {},
  },
})
</script>

NuxtPage上设置过渡

在 NuxtPage 上可以直接设置过渡效果，例如：

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

并且这种设置的方式优先级很高，即便是页面上通过 definePageMeta 设置的单独的过渡配置，也无法复写这里的设置。

-EOF-