ReactとTailwind CSSでアニメーションを行う

Reactのドキュメントに掲載されているアニメーション手法はこちら
https://reactjs.org/docs/animation.html

上記の分かりやすい解説はこちら
https://penpen-dev.com/blog/react-transition-group/

ただ、今回は上記手法を採用しなかった。

react-transition-group はややクラス名規則的に思えたのですが
Tailwind CSSはそういう外部から与えられた規則的な拡張に向かないと思ったので別の方法にしました。

実際のところ react-transition-group はクラス名規則もカスタマイズ出来るし
クラスを使わなくても状態分岐は可能であったが
単に、クラスの付け方をする程度しか必要がなかったので
react-transition-group でなくても良いという判断をした。

今回は classNames というライブラリを使用した。

アニメーションする部分を component 化して props に合わせて
classNames を使って付け替えしてあげればうまくアニメーションしてくれる。

https://qiita.com/terry_6518/items/de53123253cf67e048b3

アニメーションパターンは単純なものであれば
Tailwind CSS公式ドキュメントのTransitions & Animationと
Transforms項目を見ればカバーできると思われる。
https://tailwindcss.com/docs/transition-property

最後に、今回の記事内容に沿った実装イメージはこちらです。

interface MenuProps {
  hidden: boolean
}

export const Menu = (props: MenuProps) => {
  const animetionClass = classNames({
    "transition duration-200 ease-in-out": true,
    "translate-y-full": props.hidden
  })

  return (
    <div className={animetionClass}>
      // 省略...
    </div>
  )
}