別稱 Dialog open animation, Zoom-fade dialog
對話框在變暗的頁面上方,從中心稍微放大並淡入。
在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫,也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時,對話框從中心稍微放大並淡入:快速、含蓄,不要回彈。
每次開啟對話框都播放一次,把焦點移進對話框並留在裡面;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),只用簡單的淡入。
別稱 Image zoom overlay, Medium-style zoom
縮圖從原位置放大,在變暗的背景上置中顯示為大圖。
在[套用位置]加入「燈箱縮放」(Lightbox Zoom),也叫 image zoom overlay 或 Medium-style zoom。
點擊縮圖時,它從原位置平順放大成置中的大圖,背後的頁面隨之變暗退後;關閉時再縮回原本的位置。
支援按 Esc 或點擊背景關閉;開啟期間把焦點移到大圖檢視內,關閉後把焦點還給縮圖。
元素在原位從完全透明變為完全不透明,離開時則反過來。
在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫,也叫 fade。
元素出現時在原位從完全透明變為完全可見,離開時以同樣方式淡出:柔和,不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就瞬間切換。
別稱 Off-canvas, Side sheet, Slide-over, Navigation drawer
側邊面板從左、右或頂部邊緣滑入,推開或覆蓋頁面內容。
在[套用位置]加入「抽屜滑動」(Drawer Slide),也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方,同時後方頁面變暗,速度快、平順減速;關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面,可以用 Escape 鍵或點擊變暗區域關閉,關閉後把焦點還給開啟它的按鈕。