HTML5动画如何实现淡入淡出_HTML5透明度过渡方法【过渡指南】
用opacity+transition实现淡入淡出需设初始opacity并声明transition，避免直接JS赋值跳过渲染帧，禁用display:none过渡，正确处理visibility切换时机，兼顾兼容性与动画时长平衡。
用 opacity + transition 实现基础淡入淡出
HTML5 本身不提供动画 API，所谓“HTM
L5 动画”实际依赖 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 是较平衡的选择。
