display是离散属性，无法插值，transition: display 0.3s会被浏览器静默丢弃；应使用opacity与visibility组合，显式声明两者transition并用transition-delay协调时机，初始态设opacity: 0和visibility: hidden，显示态设opacity: 1和visibility: visible。
为什么display切换单独写transition完全没反应
因为display是离散属性，浏览器不计算中间值——display: none到display: block之间没有“0.5个block”这种状态，所以transition: display 0.3s会被静默忽略。DevTools 的 computed 面板里根本找不到这条规则。你看到的“啪一下出现”，不是动画卡住，是压根没启动。
visibility + opacity组合怎么写才真正生效
不能只改一个属性，也不能靠transition: all偷懒。必须显式声明两者，并控制切换节奏：
-
visibility本身不可插值，但可以配transition-delay让它在opacity动画快结束时才生效，避免半透明状态下误点 - 初始态推荐：
opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; - 显示态写成：
opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; - 漏掉
visibility的transition声明，它就会瞬间切换，破坏整个动画节奏
JS同步操作display后加class，为什么动画还是跳变
浏览器会把el.style.display = 'block'和el.classList.add('fade-in')合并为一次渲染，起始帧直接被跳过。常见于第三方弹窗、下拉菜单等封装组件中。
- 必须打断渲染队列：先设
display: block，再读一个触发 layout 的属性（如el.offsetHeight），最后加 class - 不能用
getComputedStyle代替offsetHeight——后者才强制重排，前者不一定触发 - 高频调用（比如滚动中反复显示）会引发 layout thrashing，导致卡顿，慎用
动画结束后要不要补display: none
要看你是否需要释放 DOM 占位空间。如果只是视觉隐藏，visibility + opacity已足够；但如果内容庞大（比如整页弹窗、富文本编辑器），过渡完仍占布局空间，可能影响滚动或父容器尺寸。
立即学习“前端免费学习笔记（深入）”；
- 应在
transitionend事件中监听event.propertyName === 'opacity'，再执行el.style.display = 'none' - 别忘了同步处理可访问性：
visibility: hidden不移除语义节点，需配合aria-hidden="true" - 若父容器有
overflow: hidden，而子元素在opacity: 0时仍占位，可能导致滚动条抖动——这时候就得靠 JS 补位，CSS 自身无解
