反応におけるページ遷移を作るためのFramer運動の使用

この短いチュートリアルでは、どのように我々はAnimatePresence コンポーネントは、我々の非常に自身のページの遷移を作成するFramerモーションによって提供されるページを反応のページ間を移動!

私たちはこの例のために反応ルータを使用しています-しかし、この同じ原則は他のルータ実装のために働くべきです(Next . jsルータでテストされて、それは問題なしで働きました!)

ビデオチュートリアルを見る

また、上記のリンクからソースコードをダウンロードすることもできます!

必要なパッケージのインストール

まず第一に、我々の反応プロジェクトに必要なパッケージをインストールしましょう.私たちは、ナビゲーションのための反応ルータと移行行動のためのフレームマー運動を必要とするでしょう.

yarn add react-router-dom framer-motion

アプリケーションにBrowserRouterを追加する

次に、トップレベルのコンポーネントでReactDOM.Render が呼ばれる.index.tsx ), 我々は、アプリケーションのコンテナをラップしたい<Router> からreact-router .
まず、必要なインポートをindex.tsx ...

import { BrowserRouter as Router } from 'react-router-dom';

次に、このルータのインスタンスにトップレベルのコンポーネントをラップします.

ReactDOM.render(
  <React.StrictMode>
    <Router> // <-- Adding this...
      <App />
    </Router> // <-- ...and this!
  </React.StrictMode>,
  document.getElementById('root')
);

シンプルスイッチの設置

次に、トップレベルコンポーネントのすぐ下のコンポーネントに変更を加える必要がありますApp コンポーネント.
インサイドApp コンポーネントは、我々のアプリケーションの基本的なルーティングシステムを設定します.この例では、我々は2つの単純なページの間でのみ移動するつもりです<Switch> と2<Route> 私達を得るためのコンポーネント.
それで、我々の中でそれらを輸入しましょうApp.tsx ファイルファースト.

import { Switch, Route } from 'react-router-dom';

次に、我々は我々のシンプルなスイッチを返しますApp コンポーネント.明確にするためにPage1 and Page2 コンポーネントは任意の有効な反応コンポーネントです.

const App = () => {
  return (
    <Switch>
      <Route path="/page1">
        <Page1 />
      </Route>
      <Route path="/page2">
        <Page2 />
      </Route>
    </Switch>
  );
};

Framer Motionからアニメーション化を加えること

今、それはアニメーションを追加する時間です!まず、ラップします<Switch> に<AnimatePresence> Framer Motionからのコンポーネントその最初に輸入しましょう.

import { AnimatePresence } from 'framer-motion';

次に、その新しいコンポーネントでアプリケーションをラップしましょう.

const App = () => {
  return (
    <AnimatePresence exitBeforeEnter initial={false}>
      <Switch>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </AnimatePresence>
  );
};

遷移AnimatePresence そのすぐ下の子の場合のみ動作しますAnimatePresence コンポーネントの変更.その場合、それは我々のSwitch コンポーネント.我々は助けるためにいくつかの小道具を追加する必要がありますAnimatePresence 変更が発生したときに認識します.
もう一度App.tsx , 我々は、輸入するつもりですuseLocation フックreact-router .

import { useLocation } from 'react-router-dom';

そして今は、追加しましょうlocation and key 我々の小道具Switch .

const App = () => {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter initial={false}>
      <Switch location={location} key={location.pathname}>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </AnimatePresence>
  );
};

ページコンポーネントへの移行効果パラメータの追加

素晴らしいニュース-私たちは我々のアプリのコンポーネントで行われます.今、私たちのページにいくつかのアニメーションを追加しましょう、我々は行く準備ができている必要があります!
ここではPage1 私が働いているコンポーネント.それはスーパーシンプル-ちょうど簡単なdiv いくつかのスタイル、およびLink アプリの他のページに.

const Page1 = () => {
  return (
    <div style={{ ...styles.page, ...styles.page1 }}>
      <p style={styles.copy}>This is page 1</p>
      <Link style={{ ...styles.copy, ...styles.link }} to="/page2">
        Go to Page 2
      </Link>
    </div>
  );
};

アニメーションをトリガーするPage1 コンポーネントをマウントすると、特別なコンポーネントでラップする必要がありますmotion.div これはフレマーの動きによって提供されます.それで、それを輸入しましょう.

import { motion } from 'framer-motion';

さあ、包みましょうPage1 新コンポーネントmotion.div コンポーネントをマウントし、アニメーションを実行するためにいくつかの小道具を提供します.

const Page1 = () => {
  return (
    <motion.div
      initial={{ scaleY: 0 }}
      animate={{ scaleY: 1 }}
      exit={{ scaleY: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page1 }}>
        <p style={styles.copy}>This is page 1</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page2">
          Go to Page 2
        </Link>
      </div>
    </motion.div>
  );
};

ご覧のとおり、我々は3つの新しい小道具を追加しましたmotion.div ここのコンポーネントも.

初期-アニメーション中のアニメーションの開始時のコンポーネントのスタイルです.

アニメーション-アニメーション中のアニメーションの最後のコンポーネントのスタイルです.

exit -アニメーションが終了したときのアニメーションの最後のコンポーネントのスタイルです.

遷移-遷移構成.ここでは、持続時間がどれくらい続くかを指定します(例では0.5秒).

これらの小道具を置いて、次のような振る舞いをすることができます.

プロップが最初にマウントされたとき、それは見えませんscaleY: 0 )

次に、それはすぐに見えるように0.5秒以上アニメーション化されますscaleY: 1 ).

それがアニメーション化されるとき、それがDOMから取り除かれる前に、それは後ろにサイズ変更されますscaleY: 0 ).

最後に、我々がする必要がある唯一の他のものは、同じメソッドを使用してアニメーションを希望する他のページコンポーネントをラップすることです.
私は2ページの間をアニメーション化しているPage1 and Page2 この例ではラップする必要がありますPage2 インmotion.div タグも.

const Page2 = () => {
  return (
    <motion.div
      initial={{ scaleY: 0 }}
      animate={{ scaleY: 1 }}
      exit={{ scaleY: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page2 }}>
        <p style={styles.copy}>This is page 2</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page1">
          Go to Page 1
        </Link>
      </div>
    </motion.div>
  );
};

そして、我々はしました！

そして、それで、我々はされます!我々は正常に反応中のページ間を移動する空想アニメーションを設定している.
また、今もあなたの移行スタイルをカスタマイズするために必要なすべての知識を持っている必要があります.各ページにも異なる遷移スタイルを持つことができます-空の限界!

疎開する

あなたがこのコースを楽しんだならば、私はチュートリアルビデオ、コース、記事とより多くをアップロードしています.このコンテンツの詳細を見たい場合は、上のメーリングリストにサインアップを検討してくださいCodeSnap.io . この動画はお気に入りから削除されています🙏
読書ありがとう!