本周我一直在寻找我在网页中引入的“错误”。我转向 CSS 过渡。具体来说：我用它来打开和关闭菜单。一位用户报告说，一旦打开菜单，他就无法关闭菜单。他有两次安装都出现了这个问题，而且我没有收到任何报告。我终于找到了问题的原因。操作系统的辅助功能设置中有一个设置可以“禁用或减少”过渡或动画。 （参见屏幕打印。）有趣的是：在 Windows 中，只有 Firefox 确实遵循此设置：IE11、Edge 和 Chrome 忽略它，而我的菜单就像一个魅力。在 OS X 中：启用此选项后，Safari 和 Firefox 的菜单都会损坏。 Chrome 做了忽略技巧。
这是我的问题。有人以前经历过这种情况吗？我如何检测用户是否启用了这个“减少动画”选项。在这种情况下，我将不得不以另一种方式从屏幕上删除菜单......
Windows 10：
OS X:
我找到了解决方案！ JavaScript 函数https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia（直到今天我还不知道）返回一个可用于更改页面行为的对象。
我创建了一个工作示例。这是从以下内容复制的片段/来源：https://webkit.org/blog-files/prefers-reduced-motion/prm.htm https://webkit.org/blog-files/prefers-reduced-motion/prm.htm当您运行该代码片段时，它会实时响应操作系统控制面板中更改的设置。
var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
document.getElementById('prmValue').innerText = motionQuery.matches ? 'on' : 'no-preference or unsupported';
}
handleReduceMotionChanged(); // trigger this once on load to set up the initial value
motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/b/168491
<h2>Using JavaScript to access the current value</h2>
<div id="indicator">Prefers reduced motion: <span id="prmValue">unsupported</span> <a href="https://webkit.org/b/168491" title="Outstanding bug: 168491" aria-label="Outstanding bug: 168491"><sup>1</sup></a></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
