通过JS操作类名触发CSS过渡动画，实现流畅的交互效果；2. 利用requestAnimationFrame进行帧级控制，可精确实现复杂动画逻辑，提升动态表现力。
JavaScript 结合 CSS 可以实现流畅、可控的动画效果。单纯使用 CSS 动画简单高效，但在需要动态控制、响应用户交互或实现复杂逻辑时，JS 能提供更强的灵活性。以下是几种常见的 JS 与 CSS 配合实现动画的方法。
1. 使用 CSS 过渡（Transition）配合 JS 控制类名
最常用的方式是通过 JavaScript 操作元素的 class，触发预定义的 CSS transition 动画。
CSS 中定义过渡效果：
.animated-box {
width: 100px;
height: 100px;
background: blue;
transition: transform 0.5s ease, opacity 0.3s ease;
}
.animated-box.active {
transform: translateX(200px);
opacity: 0.5;
}
JS 控制类的添加与移除：
const box = document.querySelector('.animated-box');
box.addEventListener('click', function () {
this.classList.toggle('active');
});
点击元素时，transform 和 opacity 会平滑变化。这种方式结构清晰，性能好，推荐优先使用。
2. 使用 requestAnimationFrame 实现帧级动画
对于更精细的控制，比如模拟物理运动或自定义缓动曲线，可以使用 requestAnimationFrame。
示例：让一个盒子从左移动到右
const element = document.getElementById('moveBox');
let pos = 0;
function animate() {
pos += 2;
element.style.left = pos + 'px';
if (pos < 300) {
requestAnimationFrame(animate);
}
}
animate(); // 启动动画
注意：需提前设置 element 的 position 为 relative 或 absolute。这种方法适合复杂动画逻辑，但需手动管理启停。
3. 利用 Web Animations API（现代浏览器支持）
Web Animations API 是原生 JS 动画接口，结合了 JS 控制力和浏览器优化。
示例：淡入并放大元素
const element = document.querySelector('.fade-element');
element.animate(
[
{ opacity: 0, transform: 'scale(0.5)' },
{ opacity: 1, transform: 'scale(1)' }
],
{
duration: 800,
easing: 'ease-out',
fill: 'forwards'
}
);
animate() 方法接收关键帧数组和配置项，简洁直观，无需写 CSS 类。适合一次性或动态生成的动画。
4. 监听动画结束事件
有时需要在动画完成后执行操作，可通过监听事件实现。
监听 CSS transition 结束：
box.addEventListener('transitionend', function () {
console.log('过渡完成');
});
监听 animation 动画结束：
box.addEventListener('animationend', function () { console.log('动画完成'); });
er('animationend', function () {
console.log('动画完成');
});
这些事件可用于链式动画或清理工作。
基本上就这些。合理结合 CSS 的声明式动画与 JS 的控制能力，既能保证性能，又能实现丰富交互。不复杂但容易忽略的是：尽量用 class 切换代替频繁修改 style，让浏览器更好优化渲染。
