新增Grid子项无动画因display变更不触发过渡；应通过opacity+transform模拟淡入排开，配合visibility:hidden和pointer-events:none避免干扰，并用“先挂载再加类”确保动画生效。
新增Grid子项时为什么直接加display: grid没动画
因为浏览器对display属性的变更不触发过渡——元素一插入就立刻渲染，transition完全不生效。常见错误是给容器设transition: all 0.3s，但新增子项本身没有“从无到有”的可动画属性变化，只会硬切。
用opacity + transform模拟淡入+排开效果
核心思路：新元素插入后默认不可见且位置偏移，再通过类名切换触发动画。必须配合visibility: hidden和pointer-events: none避免插入瞬间可交互或占位干扰。
-
opacity: 0控制淡入，transform: translateY(10px) scale(0.95)制造轻微下沉+缩放，增强入场感 - 动画结束时设
opacity: 1和transform: none，让元素归位 - 务必加
transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免线性缓动显得机械 - 不要只写
transition: all——会意外触发grid-column等不可动画属性的无效过渡，拖慢渲染
JavaScript插入新元素时如何触发动画
关键在“先挂载、再加类”。如果插入DOM的同时就带.active类，浏览器可能合并渲染，跳过初始状态。
- 用
element.classList.add('item')插入基础样式（含opacity: 0等） - 立即调用
element.offsetHeight强制重排，确保初始状态被读取 - 再用
element.classList.add('visible')，触发transition - 若需逐个延迟（如列表追加），用
setTimeout或requestAnimationFrame分批加visible类，配合animation-delay更可控
为什么grid-template-columns变化时新元素不自动排开
Grid容器结构变化（如列数增减）本身不带动画，新元素只是按新轨道布局，没有“滑入”过程。要实现排开感，得靠子项自身的transform动画，而非容器属性。
立即学习“前端免费学习笔记（深入）”；
- 避免监听
grid-template-columns做过渡——它只在特定条件下（如:hover或媒体查询）有效，动态JS修改时多数浏览器不触发transition - 真正可靠的做法：用
ResizeObserver检测容器尺寸变化，再批量给受影响的子项加animate-in类 - 复杂场景建议用
animate-css-grid库，它内部用getBoundingClientRect()计算旧位置，再用transform驱动平滑位移，省去手动算偏移
visibility: hidden和pointer-events: none，导致新元素插入瞬间能被点击或影响焦点流。 
