list-item 添加 transition 无动画是因为元素插入时无初始态，需三步：插入→强制重排（如读 offsetHeight）→添加动画类；CSS 中需预先定义基础样式与过渡属性，推荐 opacity+transform 组合。
list-item 添加 transition 为什么没动画效果
直接给 li 写 transition: all 0.3s 没用——元素刚插入 DOM 时是“无样式状态”，浏览器跳过过渡，直接渲染最终样式。本质是缺少“初始态 → 目标态”的变化过程。
- 必须手动触发一次重排（reflow），让浏览器先读取初始样式（比如
height: 0、opacity: 0），再改写为最终值 - 不能靠 CSS 自动推导“从无到有”的过渡；CSS transition 只响应已存在元素的属性变更
- 常见错误：只加
transition类，但没在添加前设置初始样式，或没强制触发重排
JS 动态添加滑入动画的最小可行步骤
核心是三步：插入元素 → 强制重排 → 切换类名触发动画。关键在第二步，否则浏览器会把插入和样式变更合并为一帧。
- 用
appendChild()或insertAdjacentElement()插入li元素 - 立即读取一个布局相关属性，例如
offsetHeight或getComputedStyle(el).height，触发同步重排 - 再添加带目标样式的类名，如
li.classList.add('slide-in')
示例关键代码：
const li = document.createElement('li');<br>li.textContent = '新项';<br>ul.appendChild(li);<br>// 强制重排<br>li.offsetHeight;<br>li.classList.add('slide-in');
.slide-in 类该定义哪些 CSS 属性
只对可动画的属性做过渡，避免影响性能。高度过渡需配合 overflow: hidden，否则内容会突兀撑开。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
opacity+transform: translateY()，性能最好（不触发重排） - 如果必须用
height，初始设height: 0、overflow: hidden，目标设height: auto—— 但注意height: auto无法过渡，得用具体像素值或 JS 测量 - 务必声明
transition在基础选择器上（如li），而不是只在.slide-in里，否则初始态无过渡能力
CSS 示例：
li {<br> opacity: 0;<br> transform: translateY(10px);<br> transition: opacity 0.3s, transform 0.3s;<br>}<br>li.slide-in {<br> opacity: 1;<br> transform: translateY(0);<br>}
用 MutationObserver 替代手动控制的适用场景
当列表由第三方库或异步数据驱动、你无法插手每次插入逻辑时，监听 DOM 变化是更鲁棒的方式。
- 监听
ul的childList变更，对每个新增li执行上述三步流程 - 注意过滤掉非
li节点（比如文本节点、注释节点），用node.nodeType === 1 && node.tagName === 'LI' - 避免重复处理：可加标记属性如
data-animated="true"，处理完即设，下次跳过
容易被忽略的一点：动画类名（如 slide-in）必须在 CSS 中预定义好，且不能依赖 JS 动态注入 style 标签——否则可能因加载时序导致首次动画失效。
