CSS响应式设计中如何实现隐藏元素的平滑过渡？

display: none 不能加 transition 是因为它是离散属性，浏览器无法插值计算，且元素会立即从布局树移除；应改用 opacity + visibility 实现淡入淡出，并配合 transition-delay 协调时序。

为什么 display: none 不能加 transition

因为 display 是离散属性，浏览器无法在 none 和 block（或 flex 等）之间做插值计算——写了 transition: display 0.3s 也完全不生效。不是慢，是压根没动。一旦触发 display: none，元素立刻从布局树中移除，后续的 opacity 过渡也会被强制中止。

用 opacity + visibility 替代 display 实现淡入淡出

这是最稳妥、兼容性好、且能保留布局定位的方案：

• opacity: 0 控制视觉透明度，配合 transition: opacity 0.3s ease 实现渐变
• visibility: hidden 配合 pointer-events: none 防止误点，同时不破坏文档流（对 position: sticky 或滚动定位至关重要）
• 显示时先设 visibility: visible，再过渡 opacity 到 1；隐藏时反向操作
• 可利用 transition-delay 协调时序：比如 visibility 0s linear 0.3s 表示等 opacity 动画结束后再切 visibility

响应式场景下如何结合媒体查询控制显隐

媒体查询本身不支持动画，但可以和 class 切换配合实现“条件性过渡”：

• 在 @media (max-width: 768px) 中定义 .mobile-hidden { opacity: 0; visibility: hidden; }
• 用 JavaScript 监听 resize 事件，根据视口宽度动态添加/移除该 class，而非直接写内联 display: none
• 避免在小屏下直接删 DOM 节点——框架如 React/Vue 的卸载时机可能早于 transition 结束，导致动画失效
• 若需释放空间（比如隐藏侧边栏），可在 transitionend 后再用 JS 设置 display: none，而不是一开始就写死

max-height 过渡适合内容高度可预估的折叠面板

当需要收起/展开的是有明确高度的内容（如下拉菜单、详情区），max-height 比 height 更安全：

立即学习“前端免费学习笔记（深入）”；

• 收起状态设 max-height: 0; overflow: hidden;
• 展开状态设 max-height: 500px;（需预估最大高度，太小会截断，太大动画拖沓）
• 不推荐 height: auto —— CSS 无法对 auto 插值，会直接跳变
• 若高度差异大，可用 JS 读取 element.scrollHeight 动态设置 max-height，再监听 transitionend 清理内联样式

实际最容易被忽略的，是 transition 触发的前提：必须有「真实发生的属性变更」。比如只切 class 但 class 里没改 opacity 值，或者用了 all 却误触了 z-index 变化，都会让动画表现异常。