transition 必须写在初始样式中且仅对可插值属性（如opacity、transform）生效；display、height:auto、z-index等不可过渡，需用opacity+visibility或max-height替代。
transition 要生效，必须写在元素的初始样式里，且只对 opacity、transform 这类可插值属性起作用；display、height: auto、z-index 等写了也白搭。
transition 必须声明在默认状态，不能只写在 hover 或 class 里
很多人把 transition 放在 :hover 或目标 class 中，结果动画完全不触发。浏览器需要在属性变化前就“知道要过渡什么”，所以它必须定义在元素的原始 CSS 规则中。
- ✅ 正确：
.box { opacity: 1; transition: opacity 0.3s ease; }+.box.hidden { opacity: 0; } - ❌ 错误：
.box { opacity: 1; }+.box.hidden { opacity: 0; transition: opacity 0.3s ease; } - 多个属性要过渡？显式列出，别用
transition: all——它会意外触发 margin、color 等隐式变化，导致抽搐或延迟启动
opacity + visibility 是最稳的显隐组合，display 不可过渡
display: none 根本不支持过渡，强行加 transition: display 没任何效果。真正可控的是 opacity（控制透明度）配合 visibility（控制是否响应事件/占位）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 收起时：设
opacity: 0; visibility: hidden; - 展开时：设
opacity: 1; visibility: visible; - 想释放布局空间？必须在
transitionend事件回调里再设display: none，而不是靠 CSS 过渡它 - 千万别只靠
visibility: hidden做过渡——它本身不可动画，必须搭配opacity或transform
JS 直接改 style 会跳过动画，必须强制重排
写 el.style.opacity = '0'; el.style.opacity = '1'; 是无效的。浏览器把这两句合并为一次渲染，中间没有帧间隔，过渡直接被跳过。
- 补救方式：在两句之间插入
void el.offsetWidth或el.offsetHeight，强制同步读取布局，制造重排机会 - 更推荐做法：用 class 切换驱动，比如先
el.classList.remove('show')，再void el.offsetWidth，最后el.classList.add('show') - 批量操作多个元素？避免 for 循环同步改 style，否则全部同一帧开始；可用
animation-delay或错开setTimeout
height: auto 无法过渡，用 max-height 模拟展开折叠
直接写 height: auto + transition: height 必然失效，因为 auto 不是可插值数值。
- 收起状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 500px;（需预估足够大，确保内容不被裁剪） - 更健壮的做法：JS 测
el.scrollHeight后动态设max-height，动画结束再清除内联样式 - 注意：预设值太小会截断内容，太大则动画拖沓——0.3–0.4s 内完成是多数体验的舒适区间
最容易被忽略的其实是“可绘制状态”：元素得已挂载、不能是 display: none、不能刚 createElement 就设样式——View Transitions API 失效、transitionend 不触发、甚至 DevTools Layers 面板里看不到合成层，根源往往就在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
