display属性无法触发CSS transition动画，因其不支持插值；应改用opacity+visibility组合实现淡入淡出，其中visibility需配step-end确保过渡同步，且transition必须定义在基础类而非切换类中。
transition 无法作用于 display 属性
直接对 display 设置 transition 完全无效——浏览器不支持该属性的插值动画。常见错误是写成：
div { display: none; transition: display 0.3s ease; }
div.show { display: block; }这样切换后元素会瞬间出现/消失，毫无过渡效果。
真正可过渡的视觉属性只有： opacity、transform、width、height（需有明确初始/终值）、margin、padding 等。其中 opacity 是控制“可见性渐变”最轻量且兼容性最好的选择。
- 用
opacity: 0+visibility: hidden模拟隐藏，再配合transition: opacity 0.2s ease -
visibility本身不可过渡，但它能解决opacity: 0仍占布局、仍响应事件的问题 - 过渡必须定义在「始终存在」的元素上，不能只写在 .show 类里
opacity 过渡需搭配 visibility 控制交互与布局
仅靠 opacity: 0 不足以让元素真正“不可见”——它依然占据文档流，且鼠标悬停、点击等事件仍可触发。所以必须组合 visibility 来切断交互，并在必要时用 pointer-events: none 补漏。
典型安全写法：
立即学习“前端免费学习笔记（深入）”；
.fade-element {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0.25s step-end;
}
.fade-element.hidden {
opacity: 0;
visibility: hidden;
}注意 step-end 是关键：它让 visibility 在过渡结束帧才切换，避免中间帧出现“半透明但可点”的状态。
-
visibility的过渡时间必须和opacity一致，否则会出现错位 - 不要用
transition-delay分开控制，会导致不可预测的时序问题 - 如果元素内含表单控件，额外加
pointer-events: none到.hidden类更稳妥
transition 未生效的三个高频原因
即使写了 opacity 和 transition，动画仍可能不触发。最常遇到的是以下三种情况：
- 目标元素没有「初始样式」：比如只在
.show类里写opacity: 1，而默认状态没定义opacity，导致浏览器无从计算差值 - 过渡属性写在被切换的类里（如只在
.show中写transition），而非基础类中——CSS 过渡必须定义在「常态」上 - 触发方式是 JS 直接改
style.display或style.opacity，绕过了 class 切换，导致 transition 被跳过（部分浏览器会重置过渡）
正确做法是始终通过 class 控制状态，例如：
element.classList.add('hidden'); // 触发 opacity 0 → 过渡开始
element.classList.remove('hidden'); // 触发 opacity 1 → 过渡开始
需要淡入淡出但不想影响布局时用 transform + opacity
如果元素隐藏后不该占位（比如模态框、下拉菜单），又想保留过渡，就不能依赖 visibility（它保持布局占位）。此时应改用 transform: scale(0) 或 transform: translateY(-20px) 配合 opacity，并在过渡结束后用 display: none 清理。
示例（淡出后彻底移出文档流）：
.dropdown {
opacity: 1;
transform: scaleY(1);
transform-origin: top;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown.closed {
opacity: 0;
transform: scaleY(0);
}
.dropdown.closed::after {
/* 实际清理用 JS：监听 transitionend 后 element.style.display = 'none' */
}这种模式必须由 JS 配合完成最终的 display 移除，否则过渡完仍会留白或遮挡。
opacity 过渡看着简单，但 visibility 时机、class 切换节奏、JS 干预边界这三点，稍不注意就会让动画卡顿、闪现或交互异常。
