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

时间 2019-12-06

标签给用户一个是否减弱动画效果选择繁體版

原文原文链接

做者：Chris Coyier
翻译：疯狂的技术宅javascript

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

未经容许严禁转载html

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

当咱们在 newsletter 上分享这种方法以后，获得了 Michael Gale 的有趣回复：java

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

我认为这是一个很是有趣的问题。程序员

此外，这段时间每当看到 <img src="gif.gif"> 时，个人大脑被触发到若是是 MP4 会怎样？！总的来讲，这是由于我确信从总体上来讲在 Web 上视频要比 GIF 具备更多的优点。事实证实，有些浏览器会在 <img> 元素中支持视频，无论你信不信，你能够为 <picture> 元素写下后备方案！web

让咱们把全部这些东西结合起来。面试

添加MP4源

最简单的方法是在 picture 中添加一个额外的 <source>。这意味着咱们须要三个源媒体文件：segmentfault

当 prefers-reduced-motion 为 reduce 时启用的后备非动画图片。
动画 GIF 做为默认值。
若是支持后备，则用 MP4 视频替换 GIF 。

例如：浏览器

<picture>
  <source srcset="static.png" media="(prefers-reduced-motion: reduce)"></source>
  <source srcset="animated.mp4" type="video/mp4">
  <img srcset="animated.gif" alt="animated image" />
</picture>

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

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

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

我在测试 Firefox 时，发现它彷佛不起做用，继续下载 GIF 版本。 Firefox 彷佛支持 prefers-reduced-motion，也许它只是目前不支持 <source> 元素？我不肯定这到底是怎么回事。

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

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

就像 Michael Gale 所说的那样，你可能彻底没法看到动画版本，由于你可能已经减弱了动画效果。

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

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

<div class="picture-wrap">
  
  <picture>
     <!-- sources  -->
  </picture>

  <button class="animate-button">Animate</button>

</div>

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

.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...

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

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

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

更多文章...