HTML本身不支持动态效果，需JS控制DOM或CSS动画实现；推荐用classList切换预定义CSS类，避免直接操作style；requestAnimationFrame优于setTimeout做JS动画；CSS动画适合可预测动效，注意性能与fill-mode；动态插入HTML应通过事件委托或插入后绑定事件。

HTML 本身不支持动态效果，所有“动态”都依赖 JavaScript 控制 DOM 或 CSS 动画/过渡触发。关键不是“用 HTML 做动态”，而是 HTML 搭配 JS 和 CSS 协同实现。

用 classList 切换 CSS 类是最稳妥的动态控制方式

直接操作 style 属性容易覆盖其他样式、难以维护；而通过 JS 添加/移除预定义的 CSS 类，既解耦逻辑又利于复用动画。

• 必须提前在 CSS 中定义好类（如 .fade-in、.active），否则 JS 切换无效
• 优先用 element.classList.toggle('xxx') 而非手动拼接 className 字符串
• 需要批量操作时，用 element.classList.add('a', 'b') 或 .remove('x', 'y')，比反复调用更安全
• 注意浏览器兼容性：classList 在 IE10+ 支持，IE9 及以下需用 polyfill 或回退到 className 操作

.card {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card.show {
  opacity: 1;
}

const card = document.querySelector('.card');
card.classList.add('show'); // 触发动画

requestAnimationFrame 是 JS 动画的正确起点

用 setTimeout 或 setInterval 做逐帧动画容易丢帧、不同步屏幕刷新率；requestAnimationFrame 会自动对齐浏览器重绘节奏，性能更稳。

• 它不接受毫秒参数，只传函数： requestAnimationFrame(animate)
• 动画循环需在回调函数末尾再次调用自身，形成递归链
• 务必用 cancelAnimationFrame(id) 清理不需要的动画，避免内存泄漏
• 适合做自定义路径、物理模拟等 CSS 无法覆盖的复杂运动

let animationId;
function animate() {
  // 更新位置、旋转等
  element.style.transform = `translateX(${x}px)`;
  animationId = requestAnimationFrame(animate);
}
animationId = requestAnimationFrame(animate); // 启动

CSS @keyframes + animation 适合一次性可预测动画

比如加载转圈、按钮点击反馈、模态框淡入，这类有明确起止和节奏的动效，用纯 CSS 实现最轻量、最易维护。

立即学习“前端免费学习笔记（深入）”；

• animation 默认不触发重排，只影响合成层（如 transform、opacity）时性能最佳
• 避免在 @keyframes 中动画 height、width、margin 等触发布局计算的属性
• 用 animation-fill-mode: forwards 保持动画结束后的最终状态，否则元素会“弹回”初始值
• JS 中可通过 element.addEventListener('animationend', handler) 监听完成事件

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce-btn {
  animation: bounce 0.6s ease;
  animation-fill-mode: forwards;
}

动态插入 HTML 时，内联事件或新节点绑定容易失效

用 innerHTML 或 insertAdjacentHTML 插入含 onclick="doSomething()" 的字符串，看似能运行，但破坏结构、难调试、且无法访问闭包变量。

• 插入后立即用 querySelector 找到新元素，再用 addEventListener 绑定事件
• 更推荐事件委托：在父容器监听 click，用 event.target.matches('.btn') 判断来源
• 若插入的是模板字符串，确保其中不包含未定义的全局函数名，否则执行时报 ReferenceError
• 动态生成的表单控件（如 input），其 value 需在插入后手动初始化，不会自动继承 JS 变量值

container.insertAdjacentHTML('beforeend', 'Click');
container.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-btn')) {
    console.log('handled');
  }
});

真正难的不是写出第一个动画，而是让动态行为在数据更新、DOM 重排、用户快速交互、低性能设备下依然稳定响应——这要求你清楚每个 API 的触发时机、重绘层级和生命周期管理。