正确做法是：为li设初始样式opacity:0;transform:translateY(20px);，JS插入后立即强制重排并添加含animation:fadeInUp 0.4s ease-out forwards的类。
用 @keyframes 实现列表项淡入+上滑入场动画
直接给 li 元素加 @keyframes 动画是无效的——因为新插入的 DOM 节点默认没有样式过渡起点，必须配合初始状态（如 opacity: 0; transform: translateY(20px);）和触发时机（比如 JS 插入后立即加类）才能生效。
常见错误是只写 @keyframes 却忘了在元素上设置初始样式和 animation 属性，或者用 display: none 隐藏元素导致动画无法触发。
- 动画必须作用在已渲染但「视觉不可见」的元素上，推荐用
opacity: 0; visibility: hidden;或transform: translateY()配合opacity - 避免用
display: none → block切换，这会中断渲染流程，动画不会播放 - 每个
li最好单独触发动画（比如插入后用 JS 加 class），否则批量添加时所有项会同时开始动画
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
给动态插入的 li 触发动画的正确姿势
不能靠 CSS 自动监听 DOM 变化。必须由 JS 在插入节点后，立刻为其添加一个带动画的 class，并确保该 class 的样式能读取到初始状态（即「重排前」就设好）。
关键点：添加 class 和强制重排之间不能有异步延迟（比如不用 setTimeout），否则浏览器可能合并渲染，跳过动画起点。
立即学习“前端免费学习笔记（深入）”；
- 插入
li后立即设置li.style.opacity = '0'; li.style.transform = 'translateY(20px)'; - 再调用
getComputedStyle(li).opacity;强制重排，让浏览器“记住”初始值 - 最后加动画 class：
li.classList.add('animate-in'); -
.animate-in必须包含animation: fadeInUp 0.4s ease-out forwards;，且forwards保证动画结束后保持opacity: 1状态
.animate-in {
animation: fadeInUp 0.4s ease-out forwards;
}
animation-fill-mode: forwards 为什么不能省
不加 forwards 的后果是：动画播完瞬间，元素会恢复到未加动画 class 时的原始样式（比如又变回 opacity: 0），看起来像闪一下就消失了。
尤其当你的列表项默认没设 opacity，而动画 class 是唯一控制透明度的地方时，forwards 就成了维持最终状态的必要条件。
-
forwards让动画结束帧的样式保留在元素上，等效于手动设置opacity: 1; transform: translateY(0); - 如果同时用了
visibility: hidden → visible，也要配visibility: visible在to帧里，否则forwards不会保留visibility - 注意：
forwards不影响动画过程中的交互（比如点击事件），但若动画中用了pointer-events: none，需在to帧里显式设回auto
性能与兼容性要注意的细节
纯 opacity + transform 是 GPU 加速的，但若动画中混入 height、margin、left/top 等会触发 Layout 或 Paint 的属性，性能会明显下降，尤其在长列表中滚动时。
- 务必用
transform: translateY()替代top或margin-top - IE10+ 支持
@keyframes，但不支持animation-fill-mode: forwards（IE10/11 有 bug，建议降级为 JS 补充设置最终态） - 移动端 Safari 对快速连续插入多个
li的动画帧率不敏感，可加will-change: transform, opacity;提前提示优化（但别滥用） - 如果用 Vue/React，不要依赖
v-enter/enter-active-class默认行为，检查它是否真的设置了初始透明度和位移
forwards 是否被正确继承」这两处。其他都是锦上添花。 
