Closed6
Tailwind CSS ✕ Next.jsにアニメーションを導入する際の調査メモ
ヤマチューやりたいこと
Tailwind CSS + Next.jsでアニメーションを実装したい！
バージョン
tailwindcss: 2.1.2
next: 10.2.0
react: 17.0.2
ヤマチューアニメーションの方法
- Tailwindでアニメーションを定義する
- 別のライブラリを使う
ヤマチューTailwindでアニメーションを定義する場合
標準で4つ定義されているアニメーションを拡張していくパターン
メリット
Tailwindの規約に則るので、コード自体がきれいにまとまる
デメリット
標準では疑似要素が使えない
【解決策①】プラグインで疑似要素を導入する
【解決策②】aria-hiddenで対処する
下のdiscussionsによるとメンテナはaria-hiddenの方が良いみたいな発言がある 記事を書いている人もいた
可能な装飾なら解決策②の方が良さそう
今どきのブラウザならちゃんと対応している
ヤマチュー別のライブラリを使う場合
色々な選択肢がありそう
- react-transition-group
- Framer Motion
メリット
リッチな画面を作りやすい
デメリット
CSS in JSみたいな記述が多くてTailwindらしさが無くなるかも？
ヤマチューreact-transition-group
React公式が提供しているライブラリ
Vueのトランジションと似ている
所感
今回の要件（Tailwind）とは相性は良くなさそう…
ヤマチューFramer Motion
ヌルヌル動いて気持ちの良いアニメーションライブラリ
hookも使えて、最近の流行りっぽい
→Chakra UIでも使われている
所感
複雑な動きを簡単に実装できるのは良さそう
ただCSSアニメーションを付けたい程度で導入するのは過剰かも？
ユーザーのアクションに対してアニメーションを付けたい場合には良いのかも
このスクラップは2022/08/29にクローズされました