Grid布局不支持直接过渡grid-template-columns/rows，因其属离散型属性；可行方案是用transform+transition控制子项位移缩放，配合JS计算目标坐标并批量更新。
Grid 布局本身不支持 transition 直接过渡 grid-template-columns 或 grid-template-rows 这类声明——浏览器根本不把它当“可动画属性”，写了也白写。
为什么直接 transition grid-template-* 没反应
因为 CSS 规范里明确把 grid-template-* 列为“discrete”（离散型）属性，即只能跳变、不能插值。你写 transition: grid-template-columns 0.3s，浏览器会静默忽略，控制台也不报错，但动画就是不动。
- 常见错误：用 JS 动态改
style.gridTemplateColumns后期待自动过渡，结果元素“啪”一下重排，毫无缓动 - 真正能被
transition捕获的 grid 相关属性只有gap、grid-column-gap、grid-row-gap（且需显式声明transition-property） -
transform虽然能过渡，但它只作用于单个元素的渲染层，无法改变 grid 的轨道结构或触发子项重流
用 transform 模拟 grid 变形动画的实操路径
想让网格“看起来在变形”，得放弃直接动 grid 定义，转而用 transform + transition 控制每个子项的位置和尺寸，再配合 JS 计算目标状态。
- 先给所有 grid 子项设
position: relative，避免 transform 影响文档流 - 用 JS 算出每个子项在“目标布局”下的
translateX/translateY偏移量（比如从 3×3 变成 2×5，需重新映射坐标） - 给子项加
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)——这里用非标准贝塞尔曲线压平收尾抖动 - 批量更新时，用
requestAnimationFrame批量写入style.transform，别用setTimeout或循环offsetTop触发重排 - 注意：移动端 Safari 对
transform: scaleZ()或perspective混合使用有渲染撕裂风险，优先用translate3d(0,0,0)强制 GPU 加速
用 @keyframes 配合 JS 控制网格动画节奏
纯 CSS 方案受限太大，但 @keyframes 可以封装动画逻辑，由 JS 决定何时播放、播几遍、是否反转。
立即学习“前端免费学习笔记（深入）”；
- 定义动画时，用
from/to或百分比精确控制每个子项的transform和opacity，比如from { opacity: 1; transform: scale(1) translate(0, 0); } - JS 中通过
element.animate()API 触发动画，它比 class 切换更可控：item.animate([{ opacity: 0, transform: 'scale(0.8) translateX(-20px)' }], { duration: 300 }) - 动画结束后，记得手动清理内联
transform（否则可能干扰后续 layout），或用animation-fill-mode: forwards保终态再 JS 重置 - 若需 stagger 效果（逐个延迟），别靠
animation-delay硬写，用item.animate(...).onfinish = () => nextItem.play()更可靠
真正难的不是让网格“动起来”，而是让多个子项在不同屏幕尺寸、不同初始位置下，同步完成位移+缩放+淡入/出，且不卡顿。这要求你提前算好每项的目标坐标，而不是依赖浏览器自动布局后再读取 getBoundingClientRect——后者必然掉帧。
