Bottom Sheet Slide-Up (底部面板上滑)
別稱 Bottom drawer, Sheet
面板從底部邊緣向上滑出，通常可以拖曳，並吸附到幾個固定高度。
適用情境
行動版操作、分享選單、篩選
變體
- modal sheet
- standard (non-modal) sheet
- drag with snap points
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「底部面板上滑」(Bottom Sheet Slide-Up)，也叫底部抽屜 (bottom drawer) 或面板 (sheet)。
面板從底部邊緣向上滑出，同時後方頁面變暗，平順減速停到定位，不要回彈。
每次開啟面板都播放一次，關閉時再滑回下方；面板開啟期間，鍵盤焦點要留在面板內。相似的動效
A
Drawer Slide (抽屜滑動)
別稱 Off-canvas, Side sheet, Slide-over, Navigation drawer
側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。
適用情境
行動版導覽、設定面板、購物車
在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。A
Slide In (滑入)
別稱 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素從容器邊緣之外滑入到停靠位置，不帶淡入效果。
適用情境
抽屜、側邊面板、橫幅
在[套用位置]加入「滑入」(Slide In) 進場動畫，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置，全程保持完全不透明：快速，平順減速，不要回彈。
在容器邊緣處裁切，避免它在外面時蓋住相鄰元素或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示。A
Toast Slide-In (快顯通知滑入)
別稱 Snackbar, Toast notification, Toast stack
簡短訊息從螢幕邊緣滑入或淡入，停留片刻後離開；堆疊的通知會移動讓出位置。
適用情境
儲存確認、錯誤訊息、復原提示
在[套用位置]加入「快顯通知滑入」(Toast Slide-In)，也叫 snackbar 或 toast notification。
每則訊息從螢幕邊緣向上滑入並淡入，平順減速；有新通知出現時，已顯示的通知要平順移動讓出位置。
在不搶走焦點的前提下把訊息朗讀給螢幕閱讀器，顯示時間要足夠閱讀，滑鼠移上去或取得焦點時暫停自動關閉。拖曳試試
Pull to Refresh (下拉重新整理)
別稱 Swipe to refresh
向下拖曳清單會露出載入圖示，放開後重新載入內容。
適用情境
動態消息、收件匣
在[套用位置]加入「下拉重新整理」(Pull to Refresh) 互動，也叫 swipe to refresh。
從頂端往下拉清單時，清單帶著一點阻力跟隨手指，並露出一個隨拉動旋轉的載入圖示；放開後載入圖示在內容重新載入期間持續旋轉，完成後清單平順地收回頂端。
只在清單已經捲動到頂端時才觸發，並為鍵盤和螢幕閱讀器使用者另外提供一般的重新整理按鈕。Component & Layout 中的其他動效
A
B
C
Carousel Crossfade (輪播交叉淡化)
別稱 Fade slideshow, Carousel fade
投影片停在原處，彼此交叉淡化切換，而不是滑動。
適用情境
首屏輪播、使用者評價
在[套用位置]加入「輪播交叉淡化」(Carousel Crossfade)，也叫淡入淡出投影片 (fade slideshow) 或輪播淡化 (carousel fade)。
投影片停在原處，緩慢地交叉淡化：舊的一張淡出的同時，下一張淡入，接著停留幾秒再換到下一張。
無縫循環回到第一張，滑鼠懸停或取得焦點時暫停；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，不要自動切換。A
B
C
點擊試試
Carousel Slide (輪播滑動)
別稱 Slider, Swipe carousel, Scroll-snap carousel
投影片在可視區域內水平移動，每次吸附一張到定位。
適用情境
首屏橫幅、商品圖庫
在[套用位置]加入「輪播滑動」(Carousel Slide)，也叫滑桿 (slider) 或滑動輪播 (swipe carousel)。
每一步都讓整排橫向滑動，使下一張投影片吸附到中間，平順減速；兩側邊緣露出相鄰的投影片，位置圓點也跟著變化。
每次只移動一張，除了按鈕和方向鍵，也支援觸控滑動，並替控制項加上給螢幕閱讀器讀取的標籤。BC
A
A
點擊試試
Container Transform (容器轉換)
別稱 Card expand to detail, Expandable card, Morph card to page
卡片展開成完整的詳細畫面，始終是同一個可見容器在改變形狀並顯示新內容。
適用情境
清單卡片到詳細頁、浮動按鈕到面板
在[套用位置]加入「容器轉換」(Container Transform) 轉場，也叫卡片展開到詳細頁 (card expand to detail) 或可展開卡片 (expandable card)。
開啟卡片時，同一個容器平順地擴展成完整的詳細畫面：舊內容迅速淡出，容器快要展開完時新內容再淡入；關閉時反向播放。
始終維持一個連續的容器，而不是在兩個獨立的方框之間交叉淡化；開啟後把焦點移到詳細畫面裡。