pnpm dlx nuxi@latest init nuxt3-page-transition
cd nuxt3-page-transition 
pnpm run dev

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <header>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/about">About</NuxtLink>
    <NuxtLink to="/users">Users</NuxtLink>
  </header>
  <main>
    <slot />
  </main>
</template>

<template>
  <h1>TOP</h1>
</template>

<template>
  <h1>About</h1>
</template>

<template>
  <h1>Users</h1>
</template>

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },

  app: {
    pageTransition: {
      name: 'page',
      mode: 'out-in',
    },
  },
})

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

// 要素が DOM に挿入される前に呼ばれる
// 要素の "enter-from" 状態を設定するために使用する
function onBeforeEnter(el) {}

// 要素が DON に挿入された次のフレームで呼ばれる
// アニメーションを開始するときに使用する
function onEnter(el, done) {
  // トランジションの終了を示すために done コールバックを呼ぶ
  // CSS と組み合わせて使う場合は省略可能
  done()
}

// enter トランジションが完了したときに呼ばれる
function onAfterEnter(el) {}

// enter トランジションが完了前にキャンセルされたときに呼ばれる
function onEnterCancelled(el) {}

// leave フックの前に呼ばれる
// 大体の場合は、leave フックだけ使用するべき
function onBeforeLeave(el) {}

// leave トランジションの開始時に呼ばれる
// leave アニメーションを開始する時に使用する
function onLeave(el, done) {
  // トランジションの終了を示すために done コールバックを呼ぶ
  // CSS と組み合わせて使う場合は省略可能
  done()
}

// leave トランジションが完了して
// 要素が DOM から取り除かれた時に呼ばれる
function onAfterLeave(el) {}

// v-show トランジションでのみ有効
function onLeaveCancelled(el) {}

pnpm i gsap

import { gsap } from 'gsap'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      gsap,
    },
  }
})

<script setup lang="ts">
import type { TransitionProps } from 'vue'

const { $gsap: gsap } = useNuxtApp()

/**
 * ページのトランジション設定
 */
let tl: gsap.core.Timeline = gsap.timeline()
const transition: TransitionProps = {
  name: 'page',
  mode: 'out-in',
  onEnter: (el, done) => {
    tl.to('.js-mask', { left: '200vw' })
    done()
  },
  onBeforeLeave: (el) => {
    tl.set('.js-mask', { left: '-200vw' })
  },
  onLeave: (el, done) => {
    tl.to('.js-mask', {
      left: 0,
      duration: 0.3,
    })
    done()
  },
}
</script>

<template>
  <NuxtLayout>
    <NuxtPage :transition="transition" />
    <div class="overlay js-mask" />
  </NuxtLayout>
</template>

<style lang="scss" scoped>
$transition-mask-color: rgb(0, 59, 220);
.overlay {
  position: fixed;
  top: 0;
  left: -200vw;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: $transition-mask-color;
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100%;
  }
  &:before {
    right: 100vw;
    background: linear-gradient(
      to top left,
      $transition-mask-color 50%,
      transparent 50%
    );
  }
  &:after {
    left: 100vw;
    background: linear-gradient(
      to bottom right,
      $transition-mask-color 50%,
      transparent 50%
    );
  }
}
</style>