直接给li加animation无效，因元素默认可见且需显式触发；应设初始态（opacity:0/transform）、用transition+classList控制入场，并通过offsetHeight强制重排、will-change启用GPU加速。
为什么直接给 li 加 animation 没反应
浏览器不会为未声明“初始不可见状态”的元素触发动画。li 默认是可见且已渲染的，@keyframes 从 opacity: 0 开始也不会自动播放——它需要显式触发（比如加类、改样式），且起始态必须在 DOM 渲染完成时就存在。
- 别写
li { animation: fadeIn 0.3s; }这种全局默认动画，它会在页面加载时立刻播一次，后续无法控制 - 确保列表容器已挂载到 DOM，再操作子项；Vue/React 中要在
mounted或useEffect里执行 - 如果用了虚拟滚动（如
vue-virtual-scroller），li实际是复用的，动画会失效，得关掉或换方案
用 transition + classList 控制逐项入场
这是最可控、兼容性最好、不依赖框架的方法：先设好初始不可见态，再通过 JS 批量添加类来触发过渡，配合 transition-delay 错开时间。
-
li基础样式必须包含：opacity: 0;和transform: translateY(20px); - 过渡只写在基础样式里：
li { transition: opacity 0.3s ease, transform 0.3s ease; }，不能只放.is-visible里 - JS 中循环添加类时，动态设
style.transitionDelay = <code>$(i * 0.1)s，比:nth-child(n)更适合动态列表 - 添加类后，**必须等 DOM 重排固化初始态**，再加激活类：
void li.offsetHeight;，否则动画跳过
监听 transitionend 时为什么总触发两次
因为 opacity 和 transform 是两个独立可动画属性，浏览器会分别派发 transitionend 事件。如果你在回调里直接清理状态，大概率只处理了一半。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 务必判断
e.propertyName：if (e.propertyName === 'transform')再执行后续逻辑 - 更稳妥的做法是统一用
setTimeout延迟清理，时长略大于 transition 持续时间（如350ms） - 避免在同一个元素上同时监听多个属性的结束事件并混用
removeEventListener，容易漏绑
移动端和 Safari 下动画卡顿的隐藏原因
不是代码写错了，而是合成层没启用或布局被意外触发。iOS Safari 对 transform 的 GPU 加速更敏感，稍有偏差就会降级为软件渲染。
立即学习“前端免费学习笔记（深入）”；
- 给动的元素加
style.willChange = 'transform, opacity';，但别滥用——只加在真正要动的li上 - 禁用
transform: scale()配合font-size变化，这会强制重绘文字，Safari 尤其明显 - 确保父容器没有
overflow: hidden且裁剪了transform区域，否则动画会被截断或闪烁
真正难的不是让第一项动起来，而是保证第 50 项在低端安卓机上也准时、不跳帧、不回弹——这取决于你有没有在每次添加类前读取 offsetHeight，以及是否把 will-change 控制在最小作用域内。
