JavaScript操作CSS样式及动画实现方法

本文深入解析了JavaScript操作CSS样式与实现动画的多种核心方法，从最基础的直接修改`style`属性，到更推荐的CSS类名切换策略，再到利用CSS `transition`实现简洁流畅的状态过渡、使用`requestAnimationFrame`打造高性能自定义逐帧动画，以及现代浏览器原生支持的强大Web Animations API；同时强调了动画性能优化的关键原则——优先使用`transform`和`opacity`等不触发重排重绘的属性，帮助开发者在不同场景下选择最合适、最高效、最易维护的动画实现方案。

JavaScript 操作 CSS 样式和实现动画效果，核心在于动态修改元素的样式属性，并借助浏览器渲染机制（如 requestAnimationFrame）或 CSS 过渡/动画规则来呈现流畅变化。

直接修改元素的 style 属性

这是最基础的方式，适用于一次性、明确的样式变更。通过 element.style.属性名 设置内联样式：

• div.style.color = 'red';
• div.style.fontSize = '16px';（注意：CSS 中的 font-size 要写成驼峰 fontSize）
• div.style.backgroundColor = '#007bff';

⚠️ 注意：这种方式只影响 style 内联样式，无法读取 CSS 类中定义的值（读取时返回空字符串），如需读取计算后样式，要用 getComputedStyle(element)。

切换或增删 CSS 类（推荐方式）

把样式逻辑交给 CSS 类，JS 只负责控制类名，更清晰、易维护、支持伪类和媒体查询：

• element.classList.add('active');
• element.classList.remove('hidden');
• element.classList.toggle('expanded');
• element.classList.replace('old', 'new');

例如配合 CSS：

.fade-in { opacity: 1; transition: opacity 0.3s ease; }
.fade-in.hidden { opacity: 0; }

JS 执行 el.classList.add('hidden') 就能触发动画。

用 CSS transition 实现简单状态动画

适合「从 A 状态到 B 状态」的平滑过渡（如悬停、展开、淡入）：

• 在 CSS 中定义要过渡的属性和时长：transition: background-color 0.2s, transform 0.3s;
• JS 只需改变触发样式的值（比如改 className 或 style.transform），浏览器自动补间
• 可监听 transitionend 事件做后续处理

✅ 优点：性能好（GPU 加速可能启用）、代码简洁、可被用户偏好（如减少动画）影响。

用 requestAnimationFrame 实现自定义逐帧动画

适合需要精确控制每帧逻辑的场景（如物理模拟、滚动跟随、复杂路径动画）：

• 避免用 setTimeout 或 setInterval 控制动画帧率
• 使用 requestAnimationFrame(callback) 让浏览器决定最佳时机
• 典型结构：定义起始/结束值 → 在 callback 中更新样式 → 递归调用 rAF 直到完成

示例（匀速移动）：

function animateLeft(el, from, to, duration = 300) {
  const start = performance.now();
  const delta = to - from;
  function step(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    el.style.left = `${from + delta * progress}px`;
    if (progress   }
  requestAnimationFrame(step);
}

高级选择：Web Animations API（现代原生方案）

浏览器原生支持的 JS 动画接口，功能接近 CSS 动画但完全由 JS 控制：

• element.animate(keyframes, options) 创建并播放动画
• 支持暂停、回放、时间控制、事件监听（onfinish）
• keyframes 可传数组（如 [{opacity: 0}, {opacity: 1}]）

示例：

el.animate(
  [{ transform: 'scale(1)', opacity: 1 },
   { transform: 'scale(1.2)', opacity: 0.8 }],
  { duration: 300, easing: 'ease-out' }
);

兼容性良好（Chrome 36+/Firefox 48+/Safari 13.1+），旧版可用 polyfill。

不复杂但容易忽略：动画性能关键在避免触发布局（layout）和绘制（paint），优先用 transform 和 opacity，慎改 width、height、top、left 等会引发重排的属性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript操作CSS样式及动画实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。