animation-delay需按索引递增设置才有效：纯css用:nth-child(n)手动设定，动态列表须用js遍历设style.animationdelay；务必声明初始状态并配animation-fill-mode:forwards。
animation-delay 怎么累加才有效
直接写 animation-delay: 1s 对所有 li 都一样，当然不会“依次”——关键在于让每个列表项的延迟值随索引递增。CSS 本身不支持动态计算（比如 calc(i * 0.2s)），所以必须手动或借助预处理器/JS 注入不同值。
- 纯 CSS 方案：用 :nth-child(n) 逐个设置，例如
li:nth-child(1) { animation-delay: 0s; }、li:nth-child(2) { animation-delay: 0.2s; }……适合项数固定且不多（如 ≤10）的场景 - 如果项数不确定或动态生成，必须由 JS 控制：遍历
li元素，给每个设置style.animationDelay = `${i * 0.2}s` - 注意单位统一：
0.2s和200ms效果相同，但混用容易出错；推荐全用秒（s）更易读
动画本身要可重复触发
只定义一次 @keyframes 不够，还得确保元素能真正“出现”——常见错误是动画没定义初始状态，或用了 opacity: 0 → 1 却忘了设 opacity: 0 在默认样式里。
- 必须在元素默认样式中显式声明起始态，例如：
li { opacity: 0; transform: translateY(10px); } -
@keyframes fade-in-up要对应结束态：to { opacity: 1; transform: translateY(0); } - 别漏掉
animation-fill-mode: forwards，否则动画一结束就跳回透明/偏移状态 - 如果列表可能重绘（如 Vue/React 列表更新），确保 key 唯一，避免 DOM 复用导致 delay 错乱
用 CSS 自定义属性简化 nth-child 写法
手写十几个 :nth-child(n) 很枯燥，可以用 CSS 自定义属性配合少量基础规则减少重复。
- 先统一声明动画基础参数：
li { animation: fade-in-up 0.4s ease-out forwards; } - 再用
:nth-child(1)~:nth-child(5)分别设置--delay: 0s~--delay: 0.8s - 最后在动画声明里用
animation-delay: var(--delay, 0s)——这样既保持 CSS-only，又比全量写 selector 清晰 - 缺点：IE 不支持自定义属性，若需兼容，只能回归全量 :nth-child
JS 动态设置 delay 时要注意时机
DOM 必须已挂载、元素已存在，才能正确遍历并设置 animationDelay。常见踩坑点是脚本执行太早或太晚。
- 放在
DOMContentLoaded里最稳妥，避免操作未生成的li - 如果列表由异步数据渲染（如 fetch 后
innerHTML插入），得等插入完成再遍历，不能直接放 script 标签底部 - React/Vue 中应在
useEffect或mounted钩子内执行，并确保 ref 已绑定到真实 DOM 节点 - 慎用
setTimeout“等一下”，不可靠；优先用 MutationObserver 或框架提供的生命周期
实际效果是否自然，取决于延迟步长与动画时长的比值。0.1s 步长配 0.3s 动画会显得急促，0.3s 步长配 0.4s 动画则可能断开。调试时建议先用 console.log 打印每个元素的 delay 值，确认数值按预期递增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
