动画被引导程序禁用，因为使用了 prefers-reduced-motion: reduce

Posted 2023-03-06

【中文标题】动画被引导程序禁用，因为使用了 prefers-reduced-motion: reduce

【英文标题】：Animations disabled by bootstrap because using prefers-reduced-motion: reduce

【发布时间】：2019-11-17 11:39:27

【问题描述】：

我注意到引导模式动画在打开或关闭时不会产生任何动画，在检查引导 CSS 文件后我发现问题来自 prefers-reduced-motion: reduce 我不需要我的网站来支持这种媒体。

如何使动画重新回到我的网站？

问题发生在 FireFox 中，而不发生在 Google Chrome 中！！

【参考方案1】：

这正是 Bootstrap 应该 工作的方式，因为用户的状态偏好是看不到动画。

覆盖此行为将偏离用户的期望和愿望，是不合适的。

这是一个可访问性问题。对于患有严重晕车、眩晕或其他一些身体或认知问题的人来说，动画可能真的让人迷失方向。

换句话说，你想要什么并不重要。不要试图“解决”这个问题。

【参考方案2】：

如果您使用 sass 编译文件，您可以将 $enable-prefers-reduced-motion-media-query 设置为 false（默认为 true）以停止该行为。

【参考方案3】：

要将动画返回到您的站点，请将this link 中的代码添加到您的项目中

这将强制 Bootstrap 转换再次工作。

【讨论】：

谢谢你的抢！

链接已损坏：-/

@johanvs 链接已更新:)

【参考方案4】：

Mozilla 有 published a list 在某些条件下触发此行为的原因

在我的情况下，它是使用 Firefox、Windows 10 和关闭轻松访问>显示动画的组合。重新打开它解决了 Bootstrap Modals 褪色的问题

【参考方案5】：

如果你已经通过 npm 或 composer 下载了 bootstrap，那么你可以将 sass 变量 $enable-reduced-motion 设置为 false。

//npm

变量$enable-reduced-motion位于"your-project-folder/node_modules/bootstrap/scss/_variables.scss"文件中。

//对于composer

变量$enable-reduced-motion位于“your-project-folder/vendor/bootstrap/scss/_variables.scss"”文件中。

【讨论】：

如何在不改变node_moules文件的情况下做到这一点？

好吧，您可以在要设置动画的元素上编写自己的过渡。据我所知，如果不将 $enable-reduced-motion 更改为 false，就没有办法做到这一点。