JavaScript过渡动画核心是通过操作CSS类触发浏览器原生transition/animation，JS控制时机、CSS定义动效；常用class切换法，需注意离开时监听transitionend再移除DOM。
JavaScript 过渡动画的核心不是靠 JS 直接“画”动画，而是通过操作 DOM 元素的 CSS 类，触发浏览器原生的 transition 或 animation 效果。JS 负责控制时机（比如元素出现/消失时添加或移除类），CSS 负责定义“怎么动”。这种方式性能好、代码清晰、兼容性强。
用 class 切换配合 CSS transition 实现进入/离开效果
这是最常用也最推荐的方式：JS 不写关键帧，只管理状态类；CSS 定义过渡行为。
- 给元素设置基础样式（含
transition）和一个“隐藏态”类（如.is-hidden） - 进入时：先确保元素已渲染（例如设为
display: block），再添加动画类（如.is-entering） - 离开时：先添加退出类（如
.is-leaving），等动画结束（监听transitionend）后再真正移除元素或设为display: none
示例关键 CSS：
.box {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.box.is-entering {
opacity: 1;
transform: translateY(0);
}
.box.is-leaving {
opacity: 0;
transform: translateY(-20px);
}
用 requestAnimationFrame 精确控制逐帧动画（适合复杂逻辑）
当需要动态计算路径、响应滚动或做物理模拟（如缓动、弹性）时，可手动用 requestAnimationFrame 更新样式。
立即学习“Java免费学习笔记（深入）”；
- 不依赖 CSS transition，完全由 JS 控制每一帧的
transform、opacity等属性 - 需自己实现缓动函数（如
easeOutCubic）和时间进度计算 - 注意在动画结束时清理定时器，并避免强制同步布局（如不要在循环里反复读
offsetTop）
配合 Vue/React 等框架的过渡系统（简化开发）
现代框架内置了声明式过渡封装，底层仍是上述原理，但省去了手动监听事件和管理类名的麻烦。
- Vue 中用
enter-active-class和leave-active-class即可 - React 可用
react-transition-group，通过CSSTransition绑定进入/离开的 class 名 - 它们会自动处理“添加类 → 等待动画 → 移除类/卸载组件”的流程，减少出错可能
注意离开动画的 DOM 移除时机
这是最容易出错的地方：如果 JS 在触发离开动画后立刻 remove() 元素，动画根本不会播放。
- 正确做法是：调用
element.classList.add('is-leaving')，然后监听transitionend事件 - 在回调中检查
event.propertyName是否是你要监听的属性（如'opacity'），再执行移除或隐藏 - 也可用
getComputedStyle(element).display === 'none'做兜底判断，避免重复触发
