display:none使transition失效，因其立即将元素从渲染树移除，中断所有样式计算；应改用visibility+opacity、max-height或transform+opacity组合实现过渡动画。
display:none 为什么让 transition 失效
因为 display 是 CSS 中的“布局开关”，一设成 none，元素立刻从渲染树中被移除，所有样式计算（包括 transition）都直接中断。浏览器根本不会给它“过渡时间”——不是卡了，是压根没启动。
常见错误现象：opacity: 0 + transition: opacity 0.3s 写得好好的，但一加 display: none 到隐藏逻辑里，动画就只剩“啪”一下消失。
- 触发时机错：在
display: none生效前没留出 transition 时间窗口 - 顺序反了：先改
display，后改opacity或transform - 用 class 切换时，两个状态被浏览器合并重绘，跳过中间帧
用 visibility + opacity 替代 display:none
这是最轻量、兼容性最好（IE9+）的方案：保留元素占位，只控制是否可见和是否参与交互。
使用场景：下拉菜单收起、提示框淡出、表单步骤切换等不需要释放空间的隐藏。
立即学习“前端免费学习笔记（深入）”；
关键点是把 visibility 和 opacity 放进同一个 transition 声明里：
button.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
-
visibility: hidden不触发布局重排，不影响其他元素位置 - 必须显式声明
visibility的 transition，否则它会“瞬间切换” - 动画结束后可加 JS 监听
transitionend，再设display: none来真正卸载（如需释放资源）
用 max-height 模拟 height 过渡
当必须“收起高度”（比如折叠面板），又想有过渡效果时，height: 0 不可靠（auto 高度无法过渡），max-height 是更稳妥的 hack。
原理：设一个远大于内容实际高度的 max-height 值（如 500px），再对它做 transition；隐藏时设为 0，展开时设回该值。
.panel {
max-height: 500px;
overflow-y: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.panel.collapsed {
max-height: 0;
opacity: 0;
}
- 别用
height: auto过渡——CSS 不支持 auto 值的插值计算 -
max-height值要略大于内容最大可能高度，太小会截断，太大则收起变慢 - 记得加
overflow-y: hidden，否则内容会撑出来
用 transform + opacity 实现高性能隐藏动画
如果隐藏同时需要位移（比如侧滑收起、缩放退出），优先用 transform + opacity，它们能走 GPU 加速，不触发重排。
性能影响：比 left/top/width/height 类属性流畅得多，尤其在低端设备或复杂页面中差异明显。
典型组合：
.modal.exit {
opacity: 0;
transform: scale(0.95) translateX(20px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
- 避免混用
transform和top/left——后者强制重排，抵消优化效果 - 隐藏完成后，仍建议在
transitionend里设display: none或移除元素，防止事件监听器残留 - 注意：
transform不影响文档流，所以收起后原位置依然空着，需配合父容器处理
真正难的不是写哪行代码，而是判断「这个隐藏要不要真正脱离文档流」——要，就得拆成两步（动画 → 移除）；不要，就老实用 visibility 或 max-height。很多人卡住，是因为一开始就把 display: none 当成了唯一答案。
