Drag-to-Reorder List (拖曳排序清單)
別稱 Reorder, Sortable list
拖曳某一項時，其他項目滑開讓位，並依新的順序排好。
適用情境
看板、可排序的設定項目、播放清單
變體
- vertical list
- grid sortable
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「拖曳排序清單」(Drag-to-Reorder List)，也叫可排序清單 (sortable list)。
被拖曳的項目直接跟著游標並微微浮起，其他項目平順地滑開讓位；放開後，它迅速落入最近的位置。
同時支援觸控和滑鼠，並提供用鍵盤移動項目的方式，把新位置報讀給螢幕閱讀器。相似的動效
- A
- B
- C
- D
- E
- F
點擊試試
FLIP Layout Animation (FLIP 版面動畫)
別稱 Layout animation, First-Last-Invert-Play
版面變動後，元素平順地移動到新的位置和尺寸。
適用情境
篩選網格、重新排列的清單
在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。- A
- B
- C
- D
點擊試試
List Item Enter/Exit (清單項目進出場)
別稱 AnimatePresence, TransitionGroup, Animated list
清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。
適用情境
待辦清單、通知、購物車商品
在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。A
拖曳試試
Drag (拖曳)
別稱 Draggable, Drag constraints
拖曳時元素跟著游標移動，並可以限制在某個區域或某條軸上。
適用情境
滑桿、可排序卡片
在[套用位置]加入「拖曳」(Drag) 互動，也叫可拖曳 (draggable) 或拖曳限制 (drag constraints)。
拖曳時元素直接跟著游標，在允許區域的邊緣停住，放開後帶一點回彈地彈回靜止位置。
觸控和滑鼠都要能用，拖曳時下方的頁面不能跟著捲動，並提供用鍵盤移動它的方式。- A
- B
- C
- D
- E
- F
- G
- H
點擊試試
Masonry / Grid Shuffle (網格重排)
別稱 Isotope filter, Filterable grid animation
套用篩選或排序時，網格中的方塊重新排列、淡出或滑到新的位置。
適用情境
作品集篩選、圖庫
在[套用位置]加入「網格重排」(Masonry / Grid Shuffle) 效果，也叫可篩選網格動畫 (filterable grid animation)。
套用篩選時，不再符合的方塊在原地縮小並淡出，其餘方塊平順地滑到新位置；清除篩選時反向播放。
網格高度變化時不要讓周圍頁面跳動；篩選控制項要用真正的按鈕，並標示目前選取的是哪個篩選。Component & Layout 中的其他動效
A
Drawer Slide (抽屜滑動)
別稱 Off-canvas, Side sheet, Slide-over, Navigation drawer
側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。
適用情境
行動版導覽、設定面板、購物車
在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。