Popover / Dropdown Open (彈出選單展開)
別稱 Menu pop, Popover pop-in, Dropdown scale-fade
浮動選單從觸發按鈕所在的位置一邊放大一邊淡入。
適用情境
下拉選單、彈出視窗、選擇清單
變體
- scale from trigger origin
- slide-fade from side
- cascading menu items
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「彈出選單展開」(Popover / Dropdown Open) 動畫，也叫 menu pop 或 dropdown scale-fade。
選單從觸發按鈕旁的角落一邊微微放大一邊淡入，要快速、俐落；關閉時淡出得稍快一些。
讓選單始終貼著觸發按鈕，按 Escape 或點擊外部即可關閉，並在觸發按鈕上向螢幕閱讀器標示展開狀態。相似的動效
A
Modal Scale-Fade In (對話框縮放淡入)
別稱 Dialog open animation, Zoom-fade dialog
對話框在變暗的頁面上方，從中心稍微放大並淡入。
適用情境
確認對話框、浮層中的表單
在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。A
將滑鼠移到上面
Tooltip Fade (工具提示淡入)
別稱 Tooltip reveal
滑鼠停留片刻後，一個小標籤在元素旁一邊輕移到位一邊淡入。
適用情境
圖示說明、被截斷的文字
在[套用位置]加入「工具提示淡入」(Tooltip Fade)，也叫 tooltip reveal。
滑鼠停留片刻後，標籤在元素旁一邊輕移到位一邊淡入；游標離開時立刻快速消失，不要延遲。
鍵盤聚焦時也要顯示，按 Escape 可關閉，並把它與元素關聯起來，讓螢幕閱讀器能唸出。A
Zoom In (縮放入場)
別稱 Scale In, Zoom In Up, Zoom In Down
元素從小而透明的狀態放大到完整尺寸，同時淡入。
適用情境
對話框、圖片燈箱、彈出視窗
在[套用位置]加入「縮放入場」(Zoom In) 進場動畫，也叫 scale in。
元素從小而透明放大到完整尺寸，同時淡入：快速、流暢，不要放大過頭再縮回。
以中心為基準縮放，不影響周圍版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。- A
- B
- C
點擊試試
Accordion Expand-Collapse (手風琴展開收合)
別稱 Collapse, Disclosure, Expandable section
切換標題時，內容面板平順地展開到完整高度，或收合到零。
適用情境
常見問題、設定群組、側邊欄樹狀選單
在[套用位置]加入「手風琴展開收合」(Accordion Expand-Collapse) 效果，也叫摺疊面板 (collapse) 或展開區 (disclosure)。
點擊標題時，面板平順地展開到內容的完整高度，再點一次就完全收合，標題上的箭頭也跟著旋轉：快速、流暢，不要回彈。
依內容的實際高度做動畫，不要寫死一個估計值；標題要用真正的按鈕並標示展開狀態，而且要能用鍵盤操作。Component & Layout 中的其他動效
ACB
點擊試試
Shared Layout Animation (共享版面動畫)
別稱 layoutId, Shared element (in-page)
元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。
適用情境
選取反白、縮圖到展開檢視
在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。ABC
點擊試試
Tab Indicator Slide (頁籤指示器滑動)
別稱 Sliding underline, Active tab indicator, Segmented control pill
底線或膠囊形背景從舊頁籤滑動到新選取的頁籤。
適用情境
頁籤列、分段控制項
在[套用位置]加入「頁籤指示器滑動」(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
選取新頁籤時，底線從舊頁籤滑到新頁籤，快速並平順減速；如果兩個頁籤寬度不同，就順勢伸縮到新頁籤的寬度。
保持正確的頁籤語意並支援方向鍵切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，指示器就直接移過去，不做滑動。A
Toast Slide-In (快顯通知滑入)
別稱 Snackbar, Toast notification, Toast stack
簡短訊息從螢幕邊緣滑入或淡入，停留片刻後離開；堆疊的通知會移動讓出位置。
適用情境
儲存確認、錯誤訊息、復原提示
在[套用位置]加入「快顯通知滑入」(Toast Slide-In)，也叫 snackbar 或 toast notification。
每則訊息從螢幕邊緣向上滑入並淡入，平順減速；有新通知出現時，已顯示的通知要平順移動讓出位置。
在不搶走焦點的前提下把訊息朗讀給螢幕閱讀器，顯示時間要足夠閱讀，滑鼠移上去或取得焦點時暫停自動關閉。