状態間のトランジション · A から B へ
図形マスクの画面遷移形状蒙版转场
- 全画面が覆われる
- 形がある
- 裏返る
一度タップすると、複数の色帯が下から上へ全画面を覆い、古い内容を隠し、そのまま上へ抜けて新しい内容が現れます。その場で入れ替わるのではなく、裏返ったように見えます。
使いどころ
ページ間の移動、大きなセクションの切り替え、全画面詳細を開くときに向きます。同じ画面内の小さな状態変化には使わないでください。1 秒かかり、ユーザーは待たされます。
パラメータ
4–6 bands · each 620ms cubic-bezier(.76,0,.24,1) · 60ms between bands · swap content when covered
レシピ
各 620ms cubic-bezier(.76,0,.24,1)図形マスクの画面遷移 → 4–6 bands · 60ms between bands · swap content when covered
AI に渡す一文
マスク遷移を作ってください。全画面の色帯を 4〜6 枚重ね、それぞれ translateY(100% → 0) で下から上へ掃き上げます。1 枚 620ms cubic-bezier(.76,0,.24,1)、枚ごとに 60ms ずらします。完全に覆った瞬間に下の内容を入れ替え、そのあと色帯を上へ抜けさせます。