作業の進め方
transitions-dev は、名前空間付きセレクターと意味に基づくモーション変数を使った、移植しやすい CSS トランジションのレシピを提供します。トリガーを基点とするドロップダウン、モーダル、切り替わる文字、スライドするタブインジケーターなど、見えているコンポーネントにレシピを合わせます。実装では、記載された状態フックをアプリケーションの実際の挙動につなぎます。
このスキルにはレビューと調整の手順もあります。レビューは編集せずに適用候補を見つけ、調整では場当たり的な値を意味に基づいてトークンに対応付けます。閉じるアニメーションは、既存の数値が近いからではなく、その目的に基づいて閉じる動作の時間トークンに対応付けます。
想定される成果物
- 選択したトランジションレシピと、必要な CSS 変数。
- コンポーネントに接続した、文書に記載されたクラスまたは属性フック。
- ファイル単位のレビュー、または意味に基づくトークン調整の提案。
ブリーフからレビューまで
- 01コンポーネントを対応付ける
要素と状態変化を確認します。基点のあるメニューと中央のモーダル、文字の切り替えとページ移動を区別します。
- 02トークンと状態フックを追加する
共有変数ブロックを一度だけ使うか、選択したレシピの変数を使います。閉じた後のクリーンアップ、再生の処理、必要な JavaScript の制御を保ちます。
- 03繰り返しの挙動を試す
コンポーネントを開き、閉じ、再度開きます。動きを減らす設定の分岐を確認し、変数に基づく時間がクリーンアップ処理と同期しているか検証します。