最简禁用方式是同时设 transition: 0s !important、animation: none !important 和 will-change: auto !important；需结合 prefers-reduced-motion 媒体查询与动态 class 控制，避免内联样式，并用 DevTools 渲染面板验证。
禁用 CSS transition 和 animation 的最简方式
动画过渡效果主要靠 transition 和 animation 两条 css 属性驱动，禁用它们不需要改 js 或框架配置，直接覆盖样式就行。
常见错误是只写 transition: none，但实际要同时处理多个属性才能彻底生效：
-
transition设为none或0s（部分旧浏览器对none支持不稳定） -
animation必须设为none，否则 keyframes 仍会触发重绘 - 如果用了
will-change，也建议设为auto，避免强制图层提升带来的额外开销
示例：
.no-animation {
transition: 0s !important;
animation: none !important;
will-change: auto !important;
}
React/Vue 中动态控制动画开关的实用模式
硬编码禁用所有动画会影响用户体验，更合理的做法是按需关闭——比如在低性能设备、用户开启“减少动画”系统偏好，或进入编辑/调试模式时。
关键不是删代码，而是把动画逻辑和条件解耦：
- 用 class 名做开关，比如
prefers-reduced-motion或debug-mode，配合body上的 data 属性统一控制 - Vue 可用
:class="{ 'no-animation': $store.state.disableAnimation }"；React 推荐用clsx或模板字符串拼接 - 注意：不要在组件内联 style 里写
transition: none，这会覆盖掉所有父级 transition 声明，且难以批量管理
Chrome DevTools 里快速验证动画是否真正停用
光看页面“不动了”不等于动画被禁用，很多 transform 或 opacity 动画仍在后台运行，只是持续时间为 0ms 或变化量为 0。
打开 DevTools 的 Rendering 面板（More Tools → Rendering），勾选：
-
Paint flashing：观察是否有意外重绘区域（说明 layout/paint 仍在触发） -
Layer borders：检查是否还有不必要的合成图层（常由will-change或transform强制创建） -
Disable animations：这是临时开关，仅用于调试，不能替代真实 CSS 控制
如果某元素仍有闪烁边框或频繁重绘，大概率是某个子元素或伪类（如 :hover）漏写了 no-animation 类。
系统级 reduced-motion 偏好如何可靠读取
用户在 macOS 系统设置或 Windows 辅助功能中开启“减少运动”，浏览器会通过 prefers-reduced-motion 媒体查询暴露该状态，但要注意兼容性和触发时机：
- CSS 中直接写
@media (prefers-reduced-motion: reduce) { ... }是最稳妥的，支持 Chrome 76+/Firefox 63+/Safari 13.1+ - JS 中用
window.matchMedia('(prefers-reduced-motion: reduce)')监听变化，但首次执行可能晚于首屏渲染，建议在document.documentElement上提前加 class - 不要依赖
navigator.platform或 UA 判断设备性能，iOS Safari 在某些 iPad 上即使开了 reduced-motion，matchMedia也可能返回false，以 CSS 媒体查询为准
复杂点在于第三方 UI 库（比如 Ant Design、Element Plus）往往没适配这个媒体查询，得自己补全局覆盖规则，而且要加 !important 才压得过它们的 scoped style。
