[React] ページ移動する時アニメーション

今日はページを移動する時アニメーションを入れる方法について説明します。

基本セッティング

まずページを二つ作ります。

main page

app.js

 function App() {
  return (
    <div className="App">
        <h1>main page</h1>
    </div>
  );
}

sub pageは別のファイルに作りました。

SubPage.js

 function SubPage(){
  return(
    <div>
      <h2>sub page</h2>
    </div>
  )
}

export default  SubPage;

ページ移動のため、main pageにリンクを付けます。

app.js

import { Routes, Route, Link, useNavigate } from 'react-router-dom'
import SubPage from './Page/SubPage.js'


function App() {
  let navigate = useNavigate();

  return (
    <div className="App">
      <div>
        <h1>main page</h1>
      </div>

      <Link to={'/subPage'}>sub page</Link>

      <Routes>
        <Route path="/subPage" element={<SubPage />} />
      </Routes>
    </div>
  );
}

アニメーションを入れる手順

1. 変化以前の状態を作る
2. 変化以後の状態を作る

二つの状態を作って、transitionでアニメーションを適用します。

.before {
  opacity: 0;
}

.after {
  opacity: 1;
  transition: opacity 1s;
}

基本状態をsub pageにつけて

SubPage.js

    <div className="before">
      <h2>sub page</h2>
    </div>

sub pageが読まれたとき、つまりreturnするときにafterを付けるコードを作成します。

classを付けたり消したりするためにstateを使いました。

そしてuseEffectを使うとファイルがマウントする時実行するコードを書きました。

SubPage.js

import { useEffect, useState } from "react";

function SubPage(){
  let [ani, setAni] = useState('')

  useEffect(()=>{
    setAni('after')
    return ()=>{
      setAni('')
    }
  }, [])

  return(
    <div className={"before " + ani}> {/* 分かち書き注意 */}
      <h2>sub page</h2>
    </div>
  )
}

以上です
ありがとうござい。