📱

特定のpath配下のみreact-transition-groupを使ってページ遷移にスライドアニメーションをつける方法

2022/03/05に公開

React

アニメーション

スライド

tech

こんにちは！
以前 react-transition-groupを使ってページ遷移にスライドアニメーションをつける方法という記事を書きました。
今回はその続きで特定のpath配下のみページ遷移にアニメーションをつける方法を紹介します。

方法

<Routes location={location}>
  <Route path="/slide/*" element={<Slide />} />
  <Route path="/no-slide" element={<NoSlide />} />
  <Route path="/no-slide2" element={<NoSlide2 />} />
</Routes>

このようにアニメーションを適応したいpathに*を使用します。
そしてSlideコンポーネント内で以下のようにTransitionGroup、CSSTransitionで囲って再度Routeを定義することで/slide配下のみスライドアニメーションを設定することができます。

<TransitionGroup component="div" className="App">
  <CSSTransition key={pathname} timeout={timeout} classNames="slider">
    <div className={getDirection(pathname)}>
      <Routes location={location}>
        <Route path="/" element={<A />} />
        <Route path="/b" element={<B />} />
        <Route path="/c" element={<C />} />
      </Routes>
    </div>
  </CSSTransition>
</TransitionGroup>

スライドアニメーションを作成するコードの詳細は react-transition-groupを使ってページ遷移にスライドアニメーションをつける方法をご覧ください

方法

Discussion