javascript操作css样式和动画的核心是动态修改样式属性并利用浏览器渲染机制；可通过直接设置style属性、切换css类、css transition或requestanimationframe实现不同场景的动画效果。
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 只负责控制类名，更清晰、易维护、支持伪类和媒体查询：
立即学习“Java免费学习笔记（深入）”；
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; }<br>.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) {<br> const start = performance.now();<br> const delta = to - from;<br> function step(now) {<br> const elapsed = now - start;<br> const progress = Math.min(elapsed / duration, 1);<br> el.style.left = `${from + delta * progress}px`;<br> if (progress < 1) requestAnimationFrame(step);<br> }<br> requestAnimationFrame(step);<br>}高级选择：Web Animations API（现代原生方案）
浏览器原生支持的 JS 动画接口，功能接近 CSS 动画但完全由 JS 控制：
-
element.animate(keyframes, options)创建并播放动画 - 支持暂停、回放、时间控制、事件监听（
onfinish） - keyframes 可传数组（如
[{opacity: 0}, {opacity: 1}]）
示例：
el.animate(<br> [{ transform: 'scale(1)', opacity: 1 },<br> { transform: 'scale(1.2)', opacity: 0.8 }],<br> { duration: 300, easing: 'ease-out' }<br>);兼容性良好（Chrome 36+/Firefox 48+/Safari 13.1+），旧版可用 polyfill。
不复杂但容易忽略：动画性能关键在避免触发布局（layout）和绘制（paint），优先用 transform 和 opacity，慎改 width、height、top、left 等会引发重排的属性。
