时间戳

首页 > 解决方案 > css 过渡：当用户设置了可访问性选项“减少运动”时，触发 transitionend 不会触发

javascript - css 过渡：当用户设置了可访问性选项“减少运动”时，触发 transitionend 不会触发

问题描述

本周我一直在寻找我在网页中介绍的“错误”。我转向 CSS 过渡。具体来说：我用它来打开和关闭菜单。一位用户报告说，一旦打开菜单，他就无法关闭菜单。他有 2 个安装出现此问题，而且我没有报告。我终于找到了问题的原因。操作系统的可访问性设置中有一个设置可以“禁用或减少”过渡或动画。（请参阅屏幕打印。）有趣的是：在 Windows 中，只有 Firefox 确实遵守此设置：IE11、Edge 和 Chrome 忽略它，我的菜单就像一个魅力。在 OS X 中：启用此选项后，Safari 和 Firefox 都会损坏菜单。Chrome 使用了忽略技巧。

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

视窗 10：

视窗 10

操作系统：

操作系统

标签： javascriptcssanimation

解决方案

我找到了解决方案！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>

推荐阅读