display:none无法触发动画，因display是离散属性；应改用opacity+visibility组合实现渐显/隐，或用max-height/transform模拟无占位隐藏效果。
display:none 无法触发 CSS 过渡
直接对 display 属性设置 transition 是无效的，因为 display 是一个离散属性（非连续可插值），浏览器无法在 none 和 block（或其他值）之间计算中间状态。你写的 transition: display 0.3s 完全不会生效，元素仍会瞬间显示或消失。
用 opacity + visibility 替代 display
这是最常用、兼容性好且语义清晰的方案：用 opacity 控制透明度过渡，用 visibility 控制是否响应交互和占据空间，两者配合实现“视觉上渐显/渐隐 + 实际不可点击/不占布局”的效果。
-
visibility: hidden时元素不可见、不响应事件、仍占文档流位置；visibility: visible时恢复 -
opacity: 0到1可被transition平滑插值 - 必须同时控制两个属性，并注意过渡时机：先设
visibility: visible，再改opacity；隐藏时则反向操作（否则可能在opacity: 0后瞬间消失，导致过渡中断）
.fade-element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
.fade-element.show {
opacity: 1;
visibility: visible;
}
需要真正移除 DOM 占位？用 max-height 或 transform
如果目标是隐藏后完全不占空间（类似 display: none 的布局效果），又想有过渡，就不能依赖 visibility。此时可借助 max-height（配合溢出裁剪）或 transform: scale() + overflow: hidden，但要注意限制条件：
-
max-height需预估最大高度（如max-height: 500px），设为0时需同时设overflow: hidden，否则内容会撑开容器 -
transform不影响文档流，适合做缩放/位移过渡，但需搭配opacity才能避免“缩到看不见却仍可点击” - 这两种方式都不能 100% 等价于
display: none的语义（比如屏幕阅读器行为、SEO 渲染时机），需按实际场景权衡
.slide-element {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease-out, opacity 0.3s ease;
}
.slide-element.show {
max-height: 500px; / 需大于实际内容高度 /
opacity: 1;
}
JavaScript 控制时的常见陷阱
用 JS 切换类名触发动画时，容易因“同步赋值”导致浏览器跳过过渡。例如：
立即学习“前端免费学习笔记（深入）”；
el.classList.add('show');
el.style.display = 'block'; // ❌ 错误：display 无过渡，且可能覆盖 CSS 规则正确做法是只操作 CSS 类，并确保样式规则已就绪；若需 JS 精确控制时机（比如动画结束后彻底移除元素），要用 transitionend 事件监听，而不是靠 setTimeout 估算时间：
el.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && !el.classList.contains('show')) {
el.style.display = 'none'; // ✅ 动画结束再设 display
}
});另外，transitionend 在多个过渡属性（如 opacity 和 max-height）同时存在时会触发多次，务必检查 e.propertyName 再处理。
