css 过渡与透明度的渐变_如何实现淡入淡出的效果
opacity过渡无反应的主因是初始值与目标值未发生实际数值变化，或transition未写在起始状态选择器中；须避免display:none、确保visibility和pointer-events协同控制交互，并注意JS触发时的状态同步与事件校验。
transition 作用在 opacity 上为什么没反应？
常见原因是元素初始 opacity 值和目标值没有实际变化，或者过渡属性没写对位置。CSS 过
渡只响应可计算的数值变化，opacity 必须从一个明确数字变到另一个数字（比如 0 → 1），不能依赖 inherit、unset 或父级未定义的值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保触发过渡的类切换前后，
opacity值有明确差异（如.hidden { opacity: 0; }→.shown { opacity: 1; }） -
transition必须写在「起始状态」选择器里（不是只写在 hover 或 active 中），否则第一次进入时无过渡 - 避免同时设置
display: none—— 它会让元素完全脱离渲染流，opacity变化被跳过 - 如果用 JS 切换 class，确保 class 切换后浏览器有机会先读取初始样式再应用新样式（必要时加
void el.offsetWidth强制重排）
opacity 过渡配合 visibility 和 pointer-events 控制交互
单纯用 opacity: 0 元素仍占据布局空间且能响应点击。要真正“隐藏”又保留过渡效果，得组合其他属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 淡出结束时加
visibility: hidden，防止鼠标穿透或焦点残留；淡入开始前确保是visibility: visible - 需要禁用交互时，同步控制
pointer-events: none（淡出过程中可设为auto→none，但注意该属性本身不支持过渡，需用 JS 在transitionend后设置） - 不要用
z-index覆盖来“屏蔽”点击，这会破坏语义和可访问性
transition: opacity .3s ease-in-out 的参数含义
这个声明看似简单，但每个字段都影响行为：
transition: opacity .3s ease-in-out;
说明：
-
opacity：只监听透明度变化，避免其他属性（如color、transform）意外触发过渡 -
.3s：持续时间，单位必须带s或ms，写成300会被忽略 -
ease-in-out：缓动函数，比默认ease更平滑；若要线性渐变用linear，要强调淡入感可用cubic-bezier(.25,.46,.45,.94) - 可追加第四个值
delay，例如transition: opacity .3s ease-in-out .1s，适合做 stagger 效果
JS 触发淡入淡出时如何避免多次快速点击导致状态错乱
用户连点按钮，class 频繁切换，容易让 opacity 卡在中间值或触发重复动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
getComputedStyle(el).opacity判断当前状态，而不是仅靠 class 存在与否 - 在过渡进行中（
el.classList.contains('is-transitioning')）忽略新触发 - 监听
transitionend事件，且校验event.propertyName === 'opacity'，防止 transform 等其他过渡干扰 - 更稳妥的做法：用
requestAnimationFrame+ 计时器模拟状态机，而非纯依赖 CSS 过渡事件
