多个元素过渡需为每个元素单独设置transition属性，因其不继承；正确做法是给目标元素显式声明transition或用class批量控制，避免仅依赖父容器样式。
多个元素过渡效果不能靠单个 transition 声明“批量生效”，必须为每个元素单独设置或通过类/选择器批量控制；否则只有部分元素动，或完全不动。
多个元素同时过渡需分别声明 transition 属性
浏览器不会自动把父元素的 transition 继承给子元素。即使你给容器加了 transition: all 0.3s，子元素的样式变化也不会因此产生过渡 —— 因为 transition 不是继承属性，它只作用于**直接设置了该样式的元素本身**。
常见错误现象：给 .container 加了 transition，然后 JS 修改子元素 .item 的 opacity，结果毫无动画。
- 正确做法是：给每个要动的元素（如
.item）显式写transition: opacity 0.3s ease - 如果元素结构固定，可用属性选择器批量匹配：
.item, .card, .btn一起设 - 若用 JS 动态插入元素，记得同步添加带
transition的 class，而不是仅靠父级样式“覆盖”
用 class 切换统一控制多个元素的过渡状态
比起硬编码内联样式或反复操作 style，用 class 控制更可靠、易维护，也天然支持多元素同步过渡。
立即学习“前端免费学习笔记（深入）”；
例如实现一组卡片 hover 时同时缩放+变色：
.card {
transition: transform 0.2s ease, background-color 0.2s ease;
}
.card:hover {
transform: scale(1.05);
background-color: #f0f9ff;
}
- 所有带
.card类的元素都会响应:hover并触发各自独立的过渡 - 多个属性用逗号分隔，可指定不同持续时间：
transform 0.2s, opacity 0.3s - 注意：不要在
:hover中写transition—— 它必须定义在常态规则里，否则首次 hover 无过渡
JS 批量触发动画时小心重排（reflow）和 timing
用 JavaScript 同时修改多个元素的样式（比如循环改 element.style.opacity），容易因浏览器渲染机制导致动画不同步或卡顿。
- 优先用
classList.add()替代直接改style，让 CSS 引擎统一调度 - 避免在循环中读取
offsetHeight等会强制同步布局的属性 - 若需精确同步，用
getComputedStyle()+requestAnimationFrame包裹批量操作 - 对大量元素（>50 个），考虑用
will-change: transform提前提示浏览器优化，但别滥用
transitionend 事件监听多个元素要逐个绑定
transitionend 是元素级事件，不冒泡，也不能委托到父容器上监听 —— 每个需要响应结束动作的元素都得单独绑。
错误写法：container.addEventListener('transitionend', handler) → 不会触发
- 正确方式：遍历元素数组，为每个调用
el.addEventListener('transitionend', handler) - 可封装工具函数避免重复代码：
onTransitionEnd(el, callback) - 注意判断
event.propertyName，避免一个元素多个属性过渡时重复触发（如同时过渡opacity和transform）
真正麻烦的不是写多少行 CSS，而是过渡是否在预期时机开始、是否所有目标元素都被覆盖、以及 JS 触发时有没有隐式打断渲染队列 —— 这些细节不检查，动画就容易“断层”或“掉帧”。
