状態間のトランジション · A から B へ
アコーディオン手风琴折叠
- コンパクト
- 整然
- 予測可能
一部が開いたり閉じたりするとき、高さが滑らかに変わり、下の内容も押し出されたり戻ったりします。
使いどころ
折りたたみパネル・FAQ・多階層メニューに使います。内容が長い場合は「リビール」を使い、高さが大きく揺れないようにします。
パラメータ
280ms · ease-in-out · grid-template-rows: 0fr→1fr
レシピ
アコーディオン → grid-template-rows 0fr → 1fr @ 280ms ease-in-out
AI に渡す一文
このアコーディオンパネルをアニメーションさせてください。grid-template-rows を 0fr から 1fr へ 280ms、ease-in-out で遷移し、閉じるときは逆にします。