应使用@media (prefers-reduced-motion: reduce) { transition: none !important; }统一禁用，而非仅删样式；需覆盖所有过渡属性、清除内联样式干扰，并配合class切换与js监听确保彻底生效。
直接关闭 CSS transition 动画，不是删掉样式，而是让浏览器“视而不见”——关键在切断触发链、清空过渡上下文，并适配用户偏好（如 prefers-reduced-motion）。
监听 prefers-reduced-motion 媒体查询
系统级动效开关（如 macOS 的“减弱动画”、Windows 的“显示动画”关闭）会触发 prefers-reduced-motion: reduce。这是最标准、无需 JS 就能响应用户设置的方式。
- 必须用
@media (prefers-reduced-motion: reduce)包裹所有transition声明，不能只写在 :hover 里——否则 hover 进去还有动画，移出时才消失，不对称 - 推荐直接设
transition: none !important，避免被其它规则覆盖；!important在这里合理，因为它是用户意愿的强声明 - 不要只禁用部分属性（比如只写
transition-property: none），这不生效；transition是简写属性，none必须作用于整个简写值
JS 动态关闭 transition 的安全写法
当需要根据用户配置（如设置页开关）实时关闭动画时，靠 class 切换比操作 style.transition 更可靠，避免内联样式污染和优先级冲突。
- 定义一个全局禁用类，例如
.no-transition，里面写transition: none !important - 切换时用
document.body.classList.toggle('no-transition')，确保所有子元素继承（CSS 中transition可继承，但实际效果取决于是否被更具体的选择器覆盖） - 避免直接写
el.style.transition = 'none'：一旦元素有多个 transition 规则（比如来自不同 class），这种写法会覆盖全部，且难以恢复原始值 - 如果必须操作单个元素，先缓存原始
transition值：const saved = el.style.transition; el.style.transition = 'none';，后续再赋回
transition 没关掉的常见原因
看似加了 prefers-reduced-motion 或切了 class，但动画还在跑，通常卡在这几个点上。
-
transition写在了元素的内联 style 里：媒体查询和 class 都无法覆盖内联样式，得用 JS 清除或改用!important类 - 用了
all却漏掉了某些属性：比如transform和opacity被禁了，但background-color还在动——检查 computed styles，确认所有过渡属性都被none覆盖 - 动画由 JS 触发（如
element.classList.add('active')），但 class 本身带transition，而禁用类没加到同一元素层级：确保禁用类作用范围包含所有可能触发动画的元素 - 第三方库（如 React 组件、UI 框架）自带 transition，且封装在 shadow DOM 或 scoped style 里：这时需查文档看是否提供
disableAnimationprop，或用更暴力的* { transition: none !important }（慎用，影响全局）
关闭后仍残留视觉变化怎么办
即使 transition 关了，用户可能还看到“跳变”——这不是动画，而是布局重排或渲染延迟造成的错觉。
- 检查是否用了
display: none ↔ block切换：它不可过渡，关掉 transition 后更明显。改用visibility: hidden+opacity: 0+pointer-events: none组合 - 确认没有残留
animation：transition: none对@keyframes动画完全无效，得单独处理animation: none - 某些属性变更（如
height、width）即使无 transition，也会触发 layout，造成卡顿感。优先用transform: scaleY(0)替代height: 0 - 移动端 touch 事件可能触发伪 hover，导致意外过渡：加
@media (hover: none)隔离触屏设备的 hover 规则
真正难的不是关掉 transition，而是关得干净——既要覆盖所有触发路径，又要避免副作用。用户设置是全局信号，响应它意味着你得把动画当作可插拔模块，而不是写死在样式表里的默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
