Masonry / Grid Shuffle (網格重排)

版面變動後，元素平順地移動到新的位置和尺寸。

在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。

清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。

在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。

拖曳某一項時，其他項目滑開讓位，並依新的順序排好。

在[套用位置]加入「拖曳排序清單」(Drag-to-Reorder List)，也叫可排序清單 (sortable list)。
被拖曳的項目直接跟著游標並微微浮起，其他項目平順地滑開讓位；放開後，它迅速落入最近的位置。
同時支援觸控和滑鼠，並提供用鍵盤移動項目的方式，把新位置報讀給螢幕閱讀器。

對話框在變暗的頁面上方，從中心稍微放大並淡入。

在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。

浮動選單從觸發按鈕所在的位置一邊放大一邊淡入。

在[套用位置]加入「彈出選單展開」(Popover / Dropdown Open) 動畫，也叫 menu pop 或 dropdown scale-fade。
選單從觸發按鈕旁的角落一邊微微放大一邊淡入，要快速、俐落；關閉時淡出得稍快一些。
讓選單始終貼著觸發按鈕，按 Escape 或點擊外部即可關閉，並在觸發按鈕上向螢幕閱讀器標示展開狀態。

元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。

在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。