应禁用非必要区域transition，对交互区加防抖和pointer-events控制，仅用transform/opacity做合成动画，hover离开时js强制中断过渡，will-change需按需动态启用。
transition触发频繁导致视觉抖动
用户快速悬停、滚动或点击时，transition反复启动，造成元素“抽搐”或“呼吸式闪烁”，尤其对前庭敏感人群易诱发眩晕。这不是动画慢的问题，而是过渡被无意义地叠加执行。
根本原因是：浏览器不取消进行中的过渡，新状态直接覆盖旧状态，导致时间线错乱、帧率崩塌。
- 禁用所有非必要区域的
transition，比如页脚、版权栏、静态文本容器，哪怕只写transition: none - 对交互密集区（如导航菜单、卡片列表）加简单防抖：
setTimeout(() => el.classList.toggle('active'), 50)，避免毫秒级连续触发 - 用
pointer-events: none在动画进行中临时屏蔽事件，防止鼠标进出堆积（注意：动画结束后要恢复） - 检查 DevTools 的 Layers 面板，确认是否因强制重排导致合成层未生成——没合成层的
transition更容易引发卡顿和视觉不适
别用会引发视差/位移感的属性做过渡
某些 CSS 属性的过渡天然带有空间位移暗示，比如left、top、margin-left、width、height，它们会触发布局重排，且在滚动或缩放场景下放大视觉扰动，容易激活前庭系统。
真正安全的合成属性只有两个：transform（尤其是translateX/Y/Z、scale、rotate）和opacity。其余都算高风险。
- 把
transition: left 0.3s全换成transition: transform 0.3s，并用transform: translateX(100px)替代left: 100px - 背景色渐变不用
background-color过渡，改用半透明遮罩层显隐控制，彻底规避颜色突变带来的刺激 - 绝对不要对
background-position设transition——视差滚动里它每帧都在变，加过渡等于主动制造延迟和粘滞感
如何让 hover 离开时立刻停止，而不是慢慢缩回去
默认transition是对称的：进入要 0.2s，离开也得走完 0.2s。用户移开鼠标后还在动，不仅打断操作流，还会强化运动错觉，加重眩晕感。
CSS 本身无法实现“进有动画、出无动画”，必须靠 JS 干预或属性隔离。
- 只在
:hover里改需要动画的属性，其他保持不变；例如按钮放大只用transform，颜色变化用background-color但不放进transition-property - 在
mouseleave事件中执行：el.style.transition = 'none'; el.style.transform = 'scale(1)'; requestAnimationFrame(() => { el.style.transition = 'transform 0.2s'; }); - 监听
transitionend时务必校验event.propertyName，避免误处理opacity导致transform动画被干扰
will-change用错反而加剧眩晕
will-change: transform不是开关，是向渲染引擎“提前报备”：接下来我要动了。但如果长期开着，GPU 会持续为这个不动的元素分配资源，导致内存占用上升、其他动画抢不到帧率——最终表现为整体页面卡顿+动画撕裂，比没开还糟。
它只适合短时高频动画场景，比如拖拽、滚动跟随、弹窗入场。
- JS 动画开始前设置：
el.style.willChange = 'transform' - 动画结束后立刻清除：
el.style.willChange = 'auto'或el.style.willChange = '' - 绝不要在 CSS 里写
will-change: all，也别对body或滚动容器设这个 - Chrome 110+ 和 Safari 16.4+ 对
transform已自动启用合成层，translateZ(0)这类 hack 基本失效，新项目可直接删掉
最难的从来不是怎么写transition，而是判断“这里到底需不需要动”。很多所谓“优化”，其实是先砍掉 70% 的过渡需求——比如按钮悬停放大有意义，但页脚文字颜色变化完全没必要。动效的价值在于引导注意力，不是填满每一处变化。真正容易被忽略的是：用户没说“晕”，不代表没受影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
