JavaScript实现DOM淡入淡出动画的核心是动态修改opacity，推荐优先使用CSS transition+class切换；需精确控制时再用requestAnimationFrame手动调节。
JavaScript 中 DOM 元素实现淡入淡出动画，核心是动态修改元素的 opacity 样式属性，并配合定时器或 CSS 过渡（transition）来平滑变化。推荐优先使用 CSS transition + class 切换，更简洁、性能更好；若需精确控制过程（如暂停、回调），再用 JavaScript 手动控制 opacity。
用 CSS transition + class 控制（推荐）
这是最简单高效的方式，不操作 JS 动画循环，由浏览器原生渲染优化：
- 先在 CSS 中定义过渡效果：
.fade { opacity: 0; transition: opacity 0.3s ease-in-out; }
.fade.in { opacity: 1; } - JS 中只需添加/移除 class：
element.classList.add('in'); // 淡入
element.classList.remove('in'); // 淡出 - 如需等动画结束后执行操作，监听
transitionend事件：
element.addEventListener('transitionend', () => { console.log('动画完成'); }, { once: true });
用 requestAnimationFrame 手动控制（高精度场景）
适合需要逐帧控制、与其它动画同步，或做自定义缓动曲线的情况：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 设置起始和目标透明度（0 → 1 或 1 → 0），按时间或帧数线性/缓动更新 opacity
- 示例淡入函数：
function fadeIn(el, duration = 300) {
el.style.opacity = 0;
el.style.display = 'block';
let start = performance.now();
function step(now) {
let elapsed = now - start;
let progress = Math.min(elapsed / duration, 1);
// 使用 ease-in-out 缓动：
let eased = progress el.style.opacity = eased;
if (progress }
requestAnimationFrame(step);
}
注意关键细节
避免常见坑，确保动画可用且兼容：
立即学习“Java免费学习笔记（深入）”；
- opacity 是 0–1 的小数，不是百分比（别写成 100% 或 50）
- 初始 opacity 未设置时，计算值可能是 '' 或 '1'，建议显式设为
el.style.opacity = '0'再开始动画 - 淡出后如需隐藏元素，应在 opacity 到 0 后设置
display: none（否则仍占布局空间） - IE9+ 支持 opacity，但旧版 IE 需用
filter: alpha(opacity=xx)（现基本无需兼容）
用第三方库快速上手（可选）
项目较重或需丰富动效时，可引入轻量库：
-
Fade.js（仅 1KB）：专注淡入淡出，API 简洁：
fade.in(el)/fade.out(el) -
GSAP：专业级动画引擎，支持时间轴、暂停、反转：
gsap.to(el, { opacity: 0, duration: 0.3 }) - 现代框架如 Vue/React 通常内置过渡组件（
<Transition>），无需手动操作 DOM
