必须用JavaScript重排DOM顺序并配合CSS transform动画模拟排序效果，因grid-template-areas等属性不可动画化；筛选时推荐visibility: hidden而非display: none，并结合contain和will-change提升兼容性与性能。
Grid项排序时DOM顺序没变，动画不触发怎么办？
CSS Grid本身不提供排序动画能力，grid-template-areas或grid-row/grid-column的数值变化不会触发动画——因为这些属性不可动画化。真正能过渡的只有transform和opacity等少数CSS属性。所以必须靠JavaScript控制DOM顺序 + CSS过渡transform来模拟“排序动画”。
- 先用JS按条件重排元素在DOM中的位置（比如调用
Array.prototype.sort()后用appendChild()或insertBefore()重插） - 给每个网格项添加
transition: transform 0.3s ease, opacity 0.2s; - 重排后立刻强制重绘（如读取
offsetHeight），再批量设置transform: translateX(0) translateY(0)清掉旧位移，让浏览器计算起始状态 - 紧接着用
requestAnimationFrame设置目标位移（基于Grid布局计算出的最终坐标）
筛选后Grid自动收缩空白区域，但元素“跳动”明显
直接用display: none隐藏筛选掉的项会导致Grid轨道（track）不重新计算，剩余项仍按原网格线定位，视觉上出现错位或留白。更稳的方式是用visibility: hidden + opacity: 0 + pointer-events: none，并配合grid-auto-flow: dense和grid-template-columns显式定义列数。
-
display: none会从文档流完全移除，Grid容器无法再为其分配轨道，但其他项不会自动填补空缺（除非用了dense且有足够空间） - 若用
visibility: hidden，元素仍占格子，需同时设置grid-column: auto和grid-row: auto避免撑开轨道 - 推荐组合：
opacity: 0; visibility: hidden; pointer-events: none;+ 给容器加transition: opacity 0.25s; - 筛选后调用
element.offsetHeight触发重排，再加transform: scale(0.98)微调避免渲染抖动
用CSS自定义属性驱动Grid动画时值更新不生效
像--sort-order: 1这类自定义属性不能直接用于grid-row或grid-column的动画，因为这些属性不支持CSS变量插值，也不可过渡。只能把它当开关，配合@property注册（仅Chrome/Edge 110+支持）或用JS监听变更后手动设置style.gridRow。
-
@property注册时必须指定syntax: "<integer>"且inherits: false，否则无法被transition识别 - 更兼容的做法：用JS把排序结果映射为每个元素的
data-sort-index，再用属性选择器（如[data-sort-index="0"]）写死grid-row值，配合transition: all 0.35s cubic-bezier(0.34, 1.1, 0.5, 1) - 避免在
:root里频繁改--sort-order，改完要同步调用document.documentElement.style.setProperty()并等待requestAnimationFrame才安全
移动端Safari中Grid动画卡顿或失效
iOS 16.4之前，Safari对grid-row/grid-column的变更不触发重绘，且transform在某些Grid容器下被优化掉。关键解法是强制启用合成层 + 避免隐式布局计算。
立即学习“前端免费学习笔记（深入）”；
- 给Grid容器加
will-change: transform;（仅在动画期间动态添加，动画结束立即移除） - 所有网格项必须设
contain: layout paint style;，防止父容器重排影响性能 - 不要用
fr单位做动画基准，改用px或rem计算目标位移（可通过getBoundingClientRect()获取当前格子尺寸） - 禁用
grid-auto-flow: row dense，改用显式grid-template-rows，避免Safari在dense模式下跳过重排
Grid动画的本质是“骗过浏览器”：让它以为你在移动元素，而不是重组布局。最稳的路径永远是JS控DOM顺序 + CSS控视觉位移，任何想纯靠CSS Grid属性实现流畅排序/筛选动画的方案，都会在某个浏览器里露出马脚。
