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 更新样式。

• 不依赖 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' 做兜底判断，避免重复触发