css transition 对 display: none 切换完全无效，因 display 是离散属性无中间状态；应改用 opacity、transform、max-height 等可过渡属性实现显隐动画。
transition 对 display: none 切换完全无效
CSS transition 不会响应 display 属性的变化，因为 display 是离散型属性，没有中间状态。你写 transition: display 0.3s，浏览器直接忽略——连警告都不报。
常见错误现象：元素从 display: none → display: block 时“啪”一下弹出来，毫无过渡；或者反过来，消失得毫无征兆。
- 真正能触发过渡的，是那些有明确数值范围的属性：比如
opacity、transform、height（需有具体像素值）、max-height - 如果必须控制显隐，优先用
opacity+pointer-events或visibility配合transform -
display只能用于彻底移除/插入布局流，别指望它参与动画
opacity 过渡生效但元素仍占位
opacity: 0 虽然视觉上隐藏了元素，但它仍在文档流中，占据空间，可能影响其他元素布局或点击穿透。
使用场景：需要淡入淡出，又不希望布局跳动（比如下拉菜单、提示框）。
立即学习“前端免费学习笔记（深入）”；
- 配合
pointer-events: none关闭交互，避免鼠标误触透明元素 - 若需完全脱离布局，得加
visibility: hidden（注意：visibility本身不可过渡，但可和opacity同时设，在过渡结束后再切display） - 别对
visibility写transition，它不会动——浏览器只在visible/hidden间硬切
height: auto 无法过渡，max-height 是权宜之计
想让一个内容高度不定的元素“展开”有动画？直接写 transition: height 0.3s 并设 height: auto，动画照样失效——auto 不是数值，没有插值路径。
性能与兼容性影响：用 max-height 模拟是目前最通用的解法，但有隐患。
- 给
max-height设一个“足够大”的固定值（如max-height: 500px），再过渡它；但内容超限时会被截断 - 不能设太小（撑不开），也不能设太大（动画时间变长，尤其收起时明显拖沓）
- 现代方案可用
height: fit-content+overflow: hidden+ js 获取真实高度后过渡，但要手动触发重排
transition 触发时机：属性必须“从有到有”才有中间帧
过渡失效最隐蔽的原因：起点或终点的样式根本没被浏览器计算出来。比如刚插入 dom 就立刻加类触发动画，此时初始 opacity 可能还没被读取，浏览器直接跳到终态。
容易踩的坑：
- JS 中添加 class 后立即设置目标样式（如
el.style.opacity = 1），没留出浏览器计算初始值的时间 - 正确做法：用
getComputedStyle(el).opacity强制触发回流，或用setTimeout(..., 0)/requestAnimationFrame延迟到下一帧 - 框架里（如 Vue/React）要注意响应式更新和 DOM 渲染的时序，别在
mounted或useEffect立即操作，等nextTick或flushSync后再触发动画
过渡不是魔法，它依赖浏览器能明确抓到两个确定的数值状态。任何一端模糊（auto、未计算样式、未渲染完成），动画就静音了。