状態間のトランジション · A から B へ
共有要素トランジション共享元素转场
- 一貫性
- 空間的
- 映画的
一覧のサムネイルが詳細を開くときに新しい位置へ飛んで拡大し、2 つの画面が同じ空間につながって見えます。
使いどころ
一覧から詳細への遷移や画像の拡大プレビューに使います。共通の視覚要素がない 2 画面では、かえって混乱します。
パラメータ
320ms · cubic-bezier(0.32, 0.72, 0, 1) · position and size transition together
レシピ
共有要素トランジション → 320ms cubic-bezier(0.32, 0.72, 0, 1)共有要素トランジション → position and size transition together
AI に渡す一文
一覧のサムネイルから詳細の大きな画像への共有要素トランジションを実装してください。同じ画像が一覧の位置から詳細の位置へ 320ms、cubic-bezier(0.32, 0.72, 0, 1) で移動しながら拡大します。