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', '');
container.addEventListener('click', (e) => {
if (e.target.matches('.dynamic-btn')) {
console.log('handled');
}
});
真正难的不是写出第一个动画，而是让动态行为在数据更新、DOM 重排、用户快速交互、低性能设备下依然稳定响应——这要求你清楚每个 API 的触发时机、重绘层级和生命周期管理。
