Memo

メモ > 技術 > フレームワーク: Next.js > ページ遷移アニメーション
ページ遷移アニメーション

JavaScriptでURLを書き換えてページ遷移したように見せることができる
恐らく、内部的には同じ方法が使われているのだと思われる
「a」ではなく「Link」でページ遷移することで、実際のページ遷移が発生しないようにしている

検証ページ
https://www.refirio.org/memos/javascript/state/

JavaScriptによるページ遷移なので、ページ遷移時のアニメーションを凝ったものにするなどができそう

Next.js + Framer Motion でページ遷移アニメーションを実装する #TypeScript - Qiita
https://qiita.com/arrow2nd/items/b16385cf22c567fbbf33

Next.js x Framer Motion : ページ遷移時にふわっと切り替わるアニメーション
https://zenn.dev/takna/articles/next-framer-motion-page-fade-in-animation

Next.js13.4 + Framer Motion でページ遷移時の ふわっ とした動きを実装してみた。
https://zenn.dev/bloomer/articles/3a814d9f054198

以下は遷移前と遷移後のページを同時に存在させて、トランジションを設定する解説みたい
また確認したい

Next.jsでPage Transitionを組む方法｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
https://giginc.co.jp/blog/giglab/Nextjs-page-transition■作業前

src/app/motion/page.tsx
'use client'

import Link from 'next/Link'

export default function Motion() {
  return (
    <main>
      <h1 className="title">Motion</h1>
      <p className="message">ページ遷移します。</p>
      <div className="m-5">
        <Link href="/motion-after" className="text-blue-600 underline">進む</Link>
      </div>
    </main>
  )
}


src/app/motion-after/page.tsx
'use client'

import Link from 'next/Link'

export default function Motion() {
  return (
    <main>
      <h1 className="title">Motion</h1>
      <p className="message">ページ遷移しました。</p>
      <div className="m-5">
        <Link href="/motion" className="text-blue-600 underline">戻る</Link>
      </div>
    </main>
  )
}
■アニメーション設定

まずは framer-motion をインストールする

>npm install framer-motion


アニメーション用のコンポーネントを作成する

'use client'

import { usePathname } from 'next/navigation'
import { AnimatePresence } from 'framer-motion'
import { motion } from 'framer-motion'

export default function MotionWrapper({
  children,
}: {
  children: React.ReactNode
}) {
  // 一意のキーを設定するためにラップした画面のパスを取得
  const pathName = usePathname()
  return (
    // アンマウント時の動きをつけるために必要な記述
    <AnimatePresence mode="wait">

      // 動きをつけるために必要な記述
      // 具体的な動きを記述
      // 今回はopacityを使用して「ふわっ」を実現
      <motion.div
        key={pathName}
        initial={{ opacity: 0 }} // 初期状態
        animate={{ opacity: 1 }} // マウント時
        exit={{ opacity: 0 }} // アンマウント時
        transition={{
          type: 'linear',
          duration: 2,
        }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}


以下のようにMotionWrapperを指定すると、ページを表示させた際にアニメーションが表示される

'use client'

import Link from 'next/Link'
import MotionWrapper from '@/components/motionWrapper/motionWrapper'

export default function Motion() {
  return (
    <MotionWrapper>
      <main>
        <h1 className="title">Motion</h1>
        <p className="message">ページ遷移しました。</p>
        <div className="m-5">
          <Link href="/motion" className="text-blue-600 underline">戻る</Link>
        </div>
      </main>
    </MotionWrapper>
  )
}
Memo

Advertisement
