ios低电量模式强制启用prefers-reduced-motion: reduce，导致所有css动画被safari忽略且无法绕过；需用devtools模拟验证，并显式重置transition、补终态样式、移除will-change、监听change事件及分离动效与状态逻辑。
因为 iOS 低电量模式会强制将 prefers-reduced-motion: reduce 设为启用状态，这不是 bug，是系统级硬性干预——所有 CSS 动画（包括 @keyframes、transition、animation，甚至 will-change 触发的硬件加速）都会被 Safari 直接忽略，无法绕过。
如何确认是不是低电量模式导致动画失效
别猜，直接查系统偏好是否生效：
- 打开 DevTools → 快捷键
Ctrl+Shift+P（Win/Linux）或Command+Shift+P（macOS）→ 输入 “reduced” → 选择Emulate CSS prefers-reduced-motion→ 切换为reduce - 刷新页面，看动画是否立刻消失；若消失，说明问题根源就是该媒体查询被触发，而非网络、JS 错误或样式未加载
- 注意：iOS 低电量模式下该值恒为
reduce，且window.matchMedia('(prefers-reduced-motion: reduce)').matches返回true，但你无法用 JS 改变它
为什么只写 animation: none 还不够
很多人在 @media (prefers-reduced-motion: reduce) 里只加 animation: none，结果交互逻辑仍出错。关键陷阱在于：
-
transition: all 0.3s这类声明即使在reduce下不执行动画，仍保留在计算样式中，导致transitionend事件永不触发 - 必须显式重置为
transition: none，而不是留空、注释掉，或写成transition: none 0s（后者仍有解析开销） - 纯装饰性
@keyframes动画（如旋转 loading 图标）需补上终态样式，例如animation: spin 2s infinite要配transform: rotate(0)，否则降级后元素可能卡在中间角度 -
will-change: transform在reduce下不仅无效，还可能引发渲染异常，建议一并移除
JS 动态控制动画时必须监听 change 事件
如果你用 JS 控制淡入、折叠等带动画的组件，不能只靠初始化判断一次 matchMedia 结果：
- 用户可能在页面运行中手动开启/关闭系统「减少动画」设置（比如从低电量模式退出）
- 必须用
motionQuery.addEventListener('change', handler)（Safari 14+ 支持），旧版 Safari 需回退到motionQuery.addListener(handler) - 推荐做法：给
或添加 class，如reduced-motion，让 CSS 层统一接管所有动画开关，JS 只负责切换 class - 第三方库（如 Framer Motion）默认不响应此变化，需手动配置：
transition={{ duration: 0 }}或初始化时传disable: motionQuery.matches
最容易被忽略的是：动画禁用后，视觉反馈（按钮按压态、加载指示器、模态框遮罩渐显）会彻底消失。必须把“动效逻辑”和“状态逻辑”拆开——前者只负责过渡，后者（如 opacity: 0 / 1 + visibility: hidden / visible）确保交互始终有明确终态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
