通过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。这种方法适合复杂动画逻辑，但需手动管理启停。
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。
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，让浏览器更好优化渲染。
