display 变更后 transition 不生效，因其为离散属性，浏览器跳过布局计算直接渲染最终状态，导致缺失过渡所需的起始几何值；须插入强制重排（如读取 offsetWidth）才能触发动画。
直接用 JavaScript 修改样式属性（比如 style.transform 或 style.opacity）不会自动触发 transition，除非该属性在 CSS 中已声明 transition，且变更前后存在可计算的起止值——但很多常见写法会悄悄失效，比如改 display、读写顺序不对、或用了不可过渡的值（如 auto、unset）。
为什么 display 变更后 transition 不生效
把 display: none 改成 display: block 再加 transform 类，动画大概率不出现。因为 display 是离散属性，浏览器跳过布局计算直接渲染最终状态；元素从“完全不在文档流”到“立刻渲染”，中间没有过渡所需的起始几何值（比如 offsetTop、getBoundingClientRect() 返回的值始终是目标态）。
- ❌ 错误写法：
el.style.display = 'block'; el.classList.add('slide-in'); - ✅ 正确做法：在两者之间插入一次强制重排，例如读取
el.offsetWidth或getComputedStyle(el).height - ⚠️ 注意：不能用
offsetWidth读取已被display: none隐藏的元素——它返回 0，但依然能触发重排
如何安全设置 transform 并触发 transition
style.transform 必须赋值为完整字符串（如 "translateX(100px) rotate(45deg)"），不能拆成对象访问；而且要确保对应 CSS 规则里写了 transition: transform 0.3s ease，否则 JS 改了也白改。
- ❌ 错误：
el.style.transform.scaleX = '1.2';（语法错误，style.transform是字符串，不是对象） - ✅ 正确：
el.style.transform = 'scaleX(1.2) translateX(20px)'; - ⚠️ 注意：如果 CSS 中
transition写的是all 0.3s，可能意外触发其他属性过渡（比如color），建议明确限定transition-property: transform
height / max-height 动画为何常失败
想用 height: 0 → height: auto 做展开动画？别试。CSS transition 无法插值 auto，浏览器不知道“auto”对应多少像素，结果就是瞬间跳变。
立即学习“Java免费学习笔记（深入）”；
- ✅ 可行方案：用
max-height代替height，设一个足够大的上限值（如max-height: 500px），再配合overflow: hidden - ⚠️ 坑点：如果内容实际高度远小于
max-height，动画时间会显得拖沓；若上限设太小，内容会被截断 - 替代思路：用
transform: scaleY(0)→scaleY(1)+origin-top，避免高度计算问题
classList.toggle() 是最简可靠的触发方式
比起手动操作 style，用 classList.toggle() 切换预定义类，能天然规避多数 timing 和重排陷阱——前提是 CSS 类里只改可过渡属性，且初始/目标状态都明确。
- ✅ 推荐结构：
.box { transition: opacity 0.2s, transform 0.3s; } .box.active { opacity: 0.8; transform: scale(1.1); } - ✅ JS 调用：
button.addEventListener('click', () => box.classList.toggle('active')); - ⚠️ 容易忽略：如果类里同时改了
display和transform，transition 仍会失效——display必须单独处理，或彻底不用
真正卡住人的从来不是 transition 本身，而是浏览器渲染管线中那些看不见的优化：重排时机、样式计算顺序、属性是否可插值。写 JS 触发动画时，先问自己一句：这个属性变更，浏览器能不能算出中间帧？如果答案模糊，就换种方式——比如用 class 切换、用 transform 替代 top/left、用 max-height 替代 height。
