display 不支持 transition，因其为离散属性无中间态；应改用 opacity 与 visibility 组合：opacity 控制渐变，visibility 控制交互与占位，且需手动对齐 timing 并避免 display 混用。
transition 对 display: none 完全不触发，不是写法问题，是浏览器引擎直接丢弃规则
你写的 transition: display 0.3s 或 transition: all 0.3s 在 DevTools 的“计算样式”里根本找不到——不是被覆盖，是浏览器压根不解析这条声明。因为 display 是离散属性，取值只有 none、block、flex 等枚举值，没有中间态可插值。动画引擎跳过它，直接应用终值。
opacity + visibility 组合才是可靠解法，但 timing 必须手动对齐
视觉渐变靠 opacity，占位与交互控制靠 visibility，两者必须协同，否则会卡顿或点击穿透：
- 初始隐藏态要同时设
opacity: 0和visibility: hidden - 过渡声明必须拆开写：
transition: opacity 0.3s ease, visibility 0s 0.3s（visibility延迟 0.3s，在opacity动画结束瞬间切换） - 显示时先设
visibility: visible（防点击穿透），再加opacity: 1类；隐藏时顺序反过来 - 快速连点场景下，记得加
pointer-events: none防误触
父容器 overflow: hidden 时，visibility: hidden 仍占位，可能引发滚动条抖动
visibility: hidden 不释放布局空间，如果父容器设了 overflow: hidden，隐藏元素的盒模型依然存在，高度/宽度未归零，容易撑出意外滚动条或导致父容器重绘抖动：
- 若需彻底释放空间，必须监听
transitionend事件，且只过滤event.propertyName === 'opacity' - 回调里执行：
el.style.display = 'none'+el.setAttribute('aria-hidden', 'true') - 同时移除
tabindex或设tabindex="-1"，避免键盘焦点停在不可见元素上
别在 JS 里混用 display 和 opacity，过渡会被强制中断
常见错误是：JS 中先写 el.style.display = 'block'，再加 fade-in 类。浏览器会合并渲染帧，起始状态变成 display: block + opacity: 0，但 opacity 过渡已丢失起点，结果就是“啪”一下出现。
正确做法是：元素始终保留在 DOM 中，初始状态用 opacity: 0 + visibility: hidden，所有切换只靠 class 控制，JS 不碰 style.display。
真正难处理的是嵌套结构里父层有 transform 或 overflow: hidden —— 它们会打断子元素的渲染管线，让 opacity 过渡也卡顿。这时候得换用 transform: translateX() + opacity，并确保父容器没意外触发层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
