display: none无法过渡因无中间状态；opacity可过渡但需配合visibility和pointer-events控制交互与布局；应通过class切换并监听opacity的transitionend事件。
为什么直接用 display: none 切换会“卡”
因为 display 是离散属性，浏览器无法插值过渡——从 block 到 none 没有中间状态，transition 对它完全无效。哪怕加了 transition: all 0.3s，元素也是瞬间消失/出现。
opacity 能过渡但还有个隐藏问题
opacity 确实支持平滑过渡（0 → 1 或 1 → 0），但它只是让元素“变透明”，依然占据文档流、响应事件（比如 hover、点击）。用户看不见，却可能误点到“隐形按钮”。
- 必须配合
pointer-events: none关闭交互（显示时记得设回auto） - 若需彻底脱离布局，得额外用
visibility: hidden（它可过渡，且不占空间，但也不响应事件） - 更稳妥的做法是：用
opacity控制渐变，用visibility控制是否可交互+是否参与布局
完整可工作的 CSS 组合写法
关键在于把 opacity 和 visibility 都放进 transition，并确保隐藏态的两个属性同步生效：
/* 初始状态：显示 */
.element {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
<p>/<em> 隐藏状态 </em>/
.element.hidden {
opacity: 0;
visibility: hidden;
}注意：visibility 的过渡时间必须和 opacity 一致，否则会出现“先消失再透明”或“透明后还挡点击”的错位。
立即学习“前端免费学习笔记（深入）”；
JavaScript 触发时别忘了加 class 而不是改 style
直接操作 element.style.opacity 会覆盖 CSS 中定义的 transition，而且没法同时控制 visibility。应该用 class 切换：
// 正确
element.classList.add('hidden'); // 触发过渡进入隐藏
element.classList.remove('hidden'); // 触发过渡回到显示
<p>// 错误（破坏过渡、遗漏 visibility）
element.style.opacity = '0';
element.style.visibility = 'hidden';如果需要在隐藏完成后再移除元素（比如清理 DOM），监听 transitionend 事件，但注意它会在 opacity 和 visibility 各触发一次——建议只监听 opacity，或加条件过滤：
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && element.classList.contains('hidden')) {
element.remove();
}
});实际项目里最容易漏的是 visibility 的配套设置，以及 JS 中用内联样式覆盖了 transition。这两处一出问题，动画就又变回“生硬”。
