Reactの状態変更によるCSSトランジション

CSS の transition は、プロパティを瞬時に切り替えるのではなく、時間をかけて2つの値の間を滑らかに補間します。要素に transition: property duration timing-function delay の形式で宣言します。

React では通常、インライン値を手動でアニメーションさせることはありません。代わりに state でクラスやスタイルを切り替え、CSS にその間のフレーム処理を任せます。

一般的なパターンでは、useState で真偽値を保持し、その値が変化したときに CSS クラスを入れ替えます。クラスが変わると対象プロパティに新しい値が設定され、CSS がその差分をアニメーションさせます。

たとえば、isOpen によって要素に open クラスを付けるかどうかを切り替え、open クラスで異なる高さや transform を設定します。

典型的な設定は const [isVisible, setIsVisible] = useState(false) です。ボタンから setIsVisible(v => !v) を呼び出して値を反転させます。

関数形式の更新関数 v => !v を使うと、複数の更新がまとめてキューに入ったときに古い state を参照せずに済むため、切り替えが確実に動作します。

className を動的に組み立てます: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}。ベースクラスに transition の宣言を置き、修飾クラスに開始値と終了値を置きます。

常に存在するベースクラスに transition を置くと、開くときと閉じるときの両方向でアニメーションが実行されます。

複数のプロパティを列挙すれば、複数のプロパティを同時にアニメーションさせられます: transition: transform 300ms ease, opacity 300ms ease。フェードとスライドを組み合わせる場合は、transform の translateY と opacity の変化を組み合わせます。

両方を同時にアニメーションさせると、要素が上にスライドしながらフェードインする、洗練された表示になります。

transition-delay は transition の開始を遅らせます。リストアイテムごとに遅延を増やすと、各アイテムが前のアイテムより少し遅れてアニメーションする、段階的なカスケードを作れます。

React では遅延をインラインで計算できます。たとえば style={{ transitionDelay: index * 50 + 'ms' }} のように指定します。

display プロパティは、none と block の間に中間値がないため、アニメーションできません。これを transition してもフェードにはならず、瞬時に切り替わります。

代わりに、見た目のフェードには opacity をアニメーションさせ、非表示の要素がクリックを無視するように pointer-events: none を切り替えます。

タイミング関数は、継続時間中に速度がどのように変化するかを決めます。linear は一定の速度で動き、ease はゆっくり始まってゆっくり終わり、cubic-bezier(...) では完全にカスタムした曲線を定義できます。

カスタム曲線は、きびきびした動きや弾むような動きに適しています。たとえば cubic-bezier(0.34, 1.56, 0.64, 1) では少し行き過ぎる動きを表現できます。

継続時間を --speed: 300ms のような CSS カスタムプロパティに保存して再利用できます: transition: opacity var(--speed) ease。これにより、コンポーネント間でタイミングを統一できます。

React から style={{ '--speed': '500ms' }} のようにインラインで変数を設定することもでき、props からアニメーションのタイミングを制御できます。

ブラウザーは、レイアウトの再計算や再描画を行わずに、GPU コンポジター上で transform と opacity をアニメーションさせられます。一方、width、top、margin などのプロパティをアニメーションさせると、毎フレームでレイアウト処理が発生し、動きがぎこちなくなることがあります。

移動、拡大縮小、回転には transform を使い、フェードには opacity を使ってください。

React で信頼性の高い transition を実現するには、真偽値の state、条件付きの修飾クラス、そして GPU に適したプロパティに対する transition を宣言するベースクラスを組み合わせます。state がクラスを切り替え、CSS がアニメーションを実行します。

これにより、コンポーネントを宣言的に保ちながら、ブラウザーの機能を活用してスムーズな動きを実現できます。

パフォーマンスに優れたアニメーションについての理解度を確認してください。

state に基づくクラスを切り替えて CSS transition を開始する方法、transform と opacity を同時にアニメーションさせる方法、遅延を使って段階的に表示する方法を学びました。また、opacity と pointer-events を使うことで display の transition を避ける方法も学びました。

さらに、タイミング関数、CSS 変数による継続時間、GPU コンポジターで処理されるプロパティによって動きを滑らかに保てる理由も確認しました。