HTML5动画如何实现淡入淡出_HTML5透明度过渡方法【过渡指南】

用opacity+transition实现淡入淡出需设初始opacity并声明transition，避免直接JS赋值跳过渲染帧，禁用display:none过渡，正确处理visibility切换时机，兼顾兼容性与动画时长平衡。

用 opacity + transition 实现基础淡入淡出

HTML5 本身不提供动画 API，所谓“HTML5 动画”实际依赖 CSS3 的 transition 或 animation。最常用、最轻量的淡入淡出方案就是控制元素的 opacity 值，并配合 transition 做平滑过渡。

关键点在于：必须给元素设置初始 opacity（比如 0），再通过类名切换触发过渡；不能只靠 JS 改值却不设过渡声明。

• opacity 取值范围是 0（完全透明）到 1（完全不透明），不支持负数或大于 1 的值
• transition: opacity 0.3s ease-in-out 必须写在默认状态（非 hover / active 等伪类）里，否则首次显示不会过渡
• 避免对 display: none 的元素做 opacity 过渡——它会直接消失，过渡失效

.fade-element {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.fade-element.show {
  opacity: 1;
}

JS 控制淡入淡出时为什么常卡顿或不触发

常见错误是用 JS 直接设 style.opacity = 0 后立刻设 style.opacity = 1，浏览器会合并渲染，跳过中间帧。必须让样式计算“分步发生”。

• 改完初始值后，强制触发重排（reflow）：element.offsetHeight 是最轻量的触发方式
• 或者用 setTimeout 把第二步延后到下一帧：setTimeout(() => { el.style.opacity = 1; }, 0)
• 更稳妥的做法是操作 class：先 el.classList.remove('show')，再 setTimeout(() => el.classList.add('show'), 0)

opacity 和 visibility / display 混用的坑

很多人想“淡出后彻底隐藏”，于是同时设 opacity: 0 和 visibility: hidden。但这样会导致过渡中断——visibility 不支持过渡，一旦生效，元素瞬间不可见，opacity 过渡就停了。

• 正确做法：过渡结束后，用 transitionend 事件监听完成时机，再设 visibility: hidden 或移除元素
• 不要对 display 做过渡——它根本不支持动画，设了也无效
• 如果需要淡出后释放空间，可用 max-height + overflow: hidden 配合过渡，但需预设高度值

需要兼容老浏览器时的替代方案

IE9 及以下不支持 opacity 过渡，但支持 filter: alpha(opacity=0)。现代项目基本不用考虑，但如果维护遗留系统：

• 必须同时写两套：opacity: 0; filter: alpha(opacity=0);
• transition 在 IE9 不生效，只能靠 JS 定时器逐帧修改 opacity 值（即手动实现 easing）
• 更现实的选择是直接降级：不加过渡，用 setTimeout 延迟 display: none，至少行为可预测

真正容易被忽略的是：过渡时间太短（如 0.1s）人眼几乎看不出变化，太长（如 1.2s）又拖慢交互节奏。多数 UI 场景下 0.2s–0.4s 是较平衡的选择。