表示
レイアウトをずらさず、新しい内容を示します。
enter目的別・CSS優先・動きを減らす設定に対応
目的を起点としたCSS優先のレシピ。動きを減らす設定にも対応します。
LIVE
目的別の実レシピを再生できます。すべてのレシピが、使う場面、使わない場面、動きを減らす設定での代替を明示します。
レイアウトをずらさず、新しい内容を示します。
enter明示的な操作に、短く応答します。
feedback一度だけ視線を導き、その後は静止します。
revealRECIPES
レイアウトを揺らさず、新しい内容の登場を伝えます。
ads-motion-enter不透明度を即時に切り替えます。02内容が取り除かれることを短く伝えます。
ads-motion-exit直ちにDOMから取り除きます。03スクロールに合わせ、補助的な内容を段階的に示します。
ads-motion-reveal最初から完全に表示します。04階層の展開・折りたたみ関係を伝えます。
ads-motion-expand高さを即時に切り替えます。05利用者の入力を受け付けたことを即座に返します。
ads-motion-feedback色または境界線だけを切り替えます。06画面間の空間的な連続性を保ちます。
ads-motion-page画面を即時に切り替えます。07項目の追加・削除・並べ替えを追跡しやすくします。
ads-motion-list即時に再配置します。08掴んだ対象とドロップ先を明確に示します。
ads-motion-dragばね動作を使わず静的な持ち上げ表現にします。09スクロール位置を控えめな進捗の手掛かりへ対応させます。
ads-motion-scroll静的なインジケーターを使います。10状態間で同じ要素の位置関係を連続的に伝えます。
ads-motion-sharedクロスフェードだけを使います。