通过 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 控制类的添加与移除：
立即学习“Java 免费学习笔记（深入）”；
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('动画完成'); });
这些事件可用于链式动画或清理工作。
基本上就这些。合理结合 CSS 的声明式动画与 JS 的控制能力，既能保证性能，又能实现丰富交互。不复杂但容易忽略的是：尽量用 class 切换代替频繁修改 style，让浏览器更好优化渲染。
