CSS过渡需JavaScript精准调度状态，通过classList切换语义化类触发；监听transitionend事件做后续操作；用CSS自定义属性实现动态配置；仅过渡transform、opacity等可合成属性以保障性能。
CSS 过渡（transition）本身不主动响应交互，它只在被触发的样式变化发生时“被动生效”。要让它在复杂交互中真正“活起来”，关键不是写更多 transition，而是让 JavaScript 成为精准、轻量、可预测的“开关手”——只负责调度状态，把视觉变化全权交给 CSS。
用 classList 切换语义化状态类，而非直接改 style
这是最稳定、最易维护的配合方式。JavaScript 不操作 element.style.transform 或 element.style.opacity，而是通过添加/移除预定义的类来触发过渡。
- 定义清晰的状态类，比如
.is-hovered、.is-open、.is-loading，每个类只声明目标样式（如transform: scale(1.05)），并配上对应的transition - JS 中统一用
element.classList.add()、.remove()或.toggle()控制，避免覆盖已有 class - 例如：点击按钮展开菜单，JS 只执行
menu.classList.toggle('menu--expanded')，CSS 内部已写好.menu--expanded { max-height: 500px; transition: max-height 0.4s ease-out; }
监听 transitionend 事件做后续动作，不依赖 setTimeout
当一个过渡结束需要触发下一步（比如移除临时类、启用新控件、发送埋点），用原生 transitionend 比用定时器更准确可靠。
- 过渡可能因用户快速反复操作而被中断，
transitionend只在真正完成时触发，且带propertyName字段，可区分是哪个属性结束 - 记得使用
once: true防止重复绑定，或手动removeEventListener - 示例：
el.addEventListener('transitionend', (e) => { if (e.propertyName === 'opacity') doNextStep(); }, { once: true });
用 CSS 自定义属性传递动态参数，让过渡“可配置”
当不同元素需要不同持续时间、缓动曲线或延迟时，不用写一堆类，改用 CSS 变量 + JS 动态赋值。
立即学习“Java免费学习笔记（深入）”；
- 在 CSS 中写：
.card { transition: transform var(--anim-duration, 0.3s) var(--anim-easing, ease); } - JS 中按需设置：
card.style.setProperty('--anim-duration', '0.6s');或card.style.setProperty('--anim-easing', 'cubic-bezier(0.2, 0.8, 0.4, 1)'); - 适合卡片列表逐项入场、表单字段校验反馈节奏差异化等场景
避免常见性能陷阱：只过渡可合成属性
不是所有属性过渡都高效。主线程重排（reflow）会卡顿，尤其在滚动或高频交互中。
- 优先过渡
transform和opacity—— 它们由合成器线程处理，不触发布局与绘制 - 慎用
width、height、left、top等会引发重排的属性；如需位移，一律用transform: translateX() - 如果必须过渡尺寸变化，确保父容器有明确
will-change: transform或设contain: layout paint提前提示浏览器
