CSS转换：当用户设置了辅助功能选项“降低运动”时，触发转换结束不触发

Question

这周，我一直在寻找我在网页中引入的“错误”。我转到了CSS过渡。具体来说：我用它来打开和关闭菜单。一位用户报告说，一旦打开菜单便无法关闭菜单。他有2个安装发生了此问题，并且我还没有任何报告。我终于找到了问题的原因。一个人的操作系统的可访问性设置中有一个设置可以“禁用或减少”过渡或动画。 （请参见屏幕打印。）有趣的部分是：在Windows中，只有Firefox遵守此设置：IE11，Edge和Chrome忽略它，并且我的菜单像一个超级按钮一样工作。在OS X中：启用此选项后，Safari和Firefox的菜单均已损坏。 Chrome会执行忽略技巧。

这是我的问题。有没有人经历过这种情况，以及如何检测用户是否启用了“减少动画”选项。在这种情况下，我将不得不以另一种方式从屏幕上删除菜单。...

Windows 10：

OS X：

Answer 1

我找到了解决方案！ javascript函数https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia（直到今天对我来说还是未知的）会返回一个对象，您可以使用该对象来更改页面的行为。

我创建了一个工作示例。这是从/贷方复制到的片段： 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>