给用户一个是否减弱动画效果的选择

作者：Chris Coyier

翻译：疯狂的技术宅

https://css-tricks.com/reduce...

未经允许严禁转载

你有没有看到过这样一种简洁的技术，它基于 prefers-reduced-motion 媒体查询，将 用于 元素来提供动图（或不提供动图）？

当我们在 newsletter 上分享这种方法之后，得到了 Michael Gale 的有趣回复：

喜欢 GIF 动画，但又不想让 UI 在变得花里胡哨的人该怎么办？让他们被迫在内容和界面之间做出选择吗？

我认为这是一个非常有趣的问题。

此外，这段时间每当看到 时，我的大脑被触发到如果是 MP4 会怎样？！总的来说，这是因为我确信从整体上来说在 Web 上视频要比 GIF 具有更多的优势。事实证明，有些浏览器会在 元素中支持视频，不管你信不信，你可以为 元素写下后备方案！

让我们把所有这些东西结合起来。

添加MP4源

最简单的方法是在 picture 中添加一个额外的 。这意味着我们需要三个源媒体文件：

1. 当 prefers-reduced-motion 为 reduce 时启用的后备非动画图片。
2. 动画 GIF 作为默认值。
3. 如果支持后备，则用 MP4 视频替换 GIF 。

例如：

在 Chrome 的默认条件下，只会下载并显示 GIF：

在 Safari 的默认条件下，仅下载并显示 MP4：

如果你在 Chrome 或 Safari中激活了 prefers-reduced-motion: reduce （在 Mac 上，可以通过：系统偏好设置→辅助功能→显示→减弱动态效果 进行设置），两个浏览器都只下载静态的 PNG 文件。

我在测试 Firefox 时，发现它似乎不起作用，继续下载 GIF 版本。 Firefox 似乎支持 prefers-reduced-motion，也许它只是目前不支持 元素？我不确定这究竟是怎么回事。

使用工具把提供的单个动画源生成其他动画源是一件很酷的事情！我打赌你可以用 Cloudinary 之类的东西来解决这个问题。

添加显示动画版本的切换按钮

就像 Michael Gale 所说的那样，你可能完全无法看到动画版本，因为你可能已经减弱了动画效果。

添加一个 用 JavaScript 得到媒体查询并强制浏览器显示动画版本应该是很容易的。

我很确定没有什么好的办法在 HTML 中以声明方式执行此操作。我们也不能把这个按钮放在 标签内。即使 不是替换元素，浏览器仍然会感到困惑并且不喜欢它。甚至根本不会渲染它。这没什么大不了的，我们还可以使用包装器。

Animate

我们可以将按钮放在图像顶部的某个位置。这只是一个随意的选择 —— 你可以把它放在你希望的任何地方，或者甚至可以让整个图像都可以点击，只要你认为可以向用户解释清楚。请记住，只有在同一媒体查询匹配时才能显示按钮：

.picture-wrap .animate-button {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .picture-wrap .animate-button {
     display: block;
  }
}

单击（或点击）按钮时，我们需要删除媒体查询以通过下载动画源来启动动画。

let button = document.querySelector(".animate-button");

button.addEventListener("click", () => {
  const parent = button.closest(".picture-wrap");
  const picture = parent.querySelector("picture");
  picture.querySelector("source[media]").remove();
});

以下是演示：

CodePen上的演示：https://codepen.io/chriscoyie...

也许这是一个很好的组件？

我们可以用 web 组件自动包含按钮、按钮样式和功能。嘿，为什么不呢？

CodePen上的演示：https://codepen.io/chriscoyie...

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深入理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提高开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通信
• 关于 Git 的 20 个面试题
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程完全指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...