display: none 的工具类不能做淡入淡出，因为它会让元素脱离文档流并立即销毁渲染节点，导致 transition 中断；正确做法是用 opacity + pointer-events 组合实现可动画隐藏。
display: none 的工具类为什么不能做淡入淡出
因为 display: none 会让元素彻底脱离文档流，无法触发 css 过渡（transition）。哪怕你同时写了 opacity 和 transition，一旦 display 切换到 none，浏览器会立即销毁渲染树节点，过渡直接中断。
常见错误写法：
.hidden { display: none; opacity: 0; transition: opacity 0.3s; } .show { display: block; opacity: 1; }这样切过去不会有任何动画 —— opacity 根本没机会渐变。
- ✅ 正确思路：隐藏时保留文档流，只靠视觉属性控制可见性
- ✅ 必须避免在动画过程中修改
display - ⚠️
visibility: hidden虽保留布局，但也不触发opacity过渡（它本身不可过渡）
opacity + pointer-events 工具类组合才是真·可动画隐藏
用 opacity: 0 配合 pointer-events: none 模拟“隐藏”，再加 transition 就能实现平滑淡入淡出。关键是要同步处理交互拦截，否则透明但可点击就出问题。
立即学习“前端免费学习笔记（深入）”；
推荐工具类写法：
.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .fade-in { opacity: 1; pointer-events: auto; }- ✅
opacity控制视觉显示，支持过渡 - ✅
pointer-events: none防止透明态下误触 - ⚠️ 注意：若元素内有
position: absolute子元素，需单独重置其pointer-events - ⚠️ 不要依赖
opacity: 0做安全隐藏（如敏感信息），它仍可被屏幕阅读器读取、可被 dom 查询到
visibility: hidden 适合什么场景
visibility: hidden 不触发重排，也不响应鼠标事件，但保留空间、维持布局。它不是动画方案，而是“静默占位”方案。
典型适用场景：
- 表格行批量隐藏（避免列宽因
display: none重算） - 模态框关闭前的占位（防止背景内容突然上移）
- 配合 js 做状态预判：先
visibility: hidden，再异步加载完后切opacity动画
工具类建议：
.visually-hidden { visibility: hidden; } .visually-visible { visibility: visible; }注意：visibility 本身不可过渡，所以不要给它加 transition —— 浏览器会忽略。
display 工具类只该用于硬切换
如果你明确不需要动画、追求最小开销（比如菜单收起、表单字段条件渲染），display 类仍是最快最干净的选择。
标准写法示例：
.d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; }- ✅ 无渲染残留，内存和性能开销最低
- ✅ 适合 SSR 或首屏关键路径中快速裁剪 DOM
- ⚠️ 切换瞬间完成，无法监听“动画结束”事件（
transitionend不触发） - ⚠️ 若与
opacity或visibility类混用，务必确保 CSS 优先级不冲突（display的权重高于opacity）
实际项目里最容易翻车的是：把 fade-out 和 d-none 放在同一个元素上，以为能“先淡出再隐藏”，结果 display: none 立刻生效，动画根本没跑。真正要做的，是用 JS 控制 class 切换时机 —— 先加 fade-out，等 transitionend 触发后再加 d-none。