状態間のトランジション · A から B へ
カードの全画面展開卡片撑满全屏
- ファインダーを開く感じ
- ぼけない
- 角丸も追従
角丸のカードをタップすると、角丸ごと画面いっぱいまで育ちます。中の画像は同時に逆方向へ縮小するので、写真が拡大されるのではなくファインダーが開くように見えます。途中でぼけません。
使いどころ
リストから詳細へ、ギャラリーの拡大、カード型ナビに向きます。移動先が別ページで共通の要素がない場合は、共有要素トランジションのほうが適します。
パラメータ
outer transform: scale .52 → 1 · inner image 1.3 → 1 (counter-scale) · border-radius calc(20px / scale) · 520ms cubic-bezier(.32,.72,0,1)
レシピ
カードの全画面展開 → scale .52 → 1 @ 520ms cubic-bezier(.32,.72,0,1)カードの全画面展開 → image 1.3 → 1 counter-scale @ 520ms
AI に渡す一文
このカードをその場で全画面に展開させてください。外枠の scale を .52 から 1 へ、内側の画像は逆方向に 1.3 から 1 へ動かします（2 つの拡大率が掛けて約 1 になるので実ピクセルはほぼ変わらず、ぼけません）。角丸は border-radius: calc(20px / 現在の scale) で補正し、全体は 520ms cubic-bezier(.32,.72,0,1) で動かします。