Nuxt3 页面过度效果

首先，如果两个 page 分别在不同的 layout 下，是无法使用 pageTransition 来实现切换效果的，这时候需要使用 layoutTransition 来实现切换效果

这里采用 npm package 的方式安装 animate.css，当然采用 cdn 的形式也是可以的

相同 layout 下的切换效果

• app.vue

<template>
  <div>
    <transition name="page" mode="out-in">
      <nuxt-page></nuxt-page>
    </transition>
  </div>
</template>

<style>
  .page-enter-active,
  .page-leave-active {
    transition: opacity 0.5s, transform 0.5s;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>

不同 layout 下的切换效果

安装

pnpm i animate.css -S

app.vue 导入

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<script setup>
  import "animate.css";
</script>

<style lang="scss">
  .page-enter-active {
    animation: fadeIn ease-in 1s;
  }
  .page-leave-active {
    animation: fadeOut ease-out 1s;
  }
</style>

配置切换效果

• 再然后在 nuxt.config.js 中配置切换效果

export default defineNuxtConfig({
  app: {
    layoutTransition: { name: "page", mode: "out-in" },
  },
});