窗口调整大小期间停止动画 | CSS-Tricks

假设您的页面上有很多元素的过渡和动画。其中一些会在窗口调整大小后触发，因为它们与页面大小、位置、填充或其他因素有关。无论是什么原因，过渡或动画运行可能会导致在调整窗口大小时出现卡顿感。如果这些过渡或动画在这些情况下没有带来任何好处，则可以将其关闭！

诀窍是应用一个类来全局关闭所有过渡和动画

let resizeTimer;
window.addEventListener("resize", () => {
  document.body.classList.add("resize-animation-stopper");
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    document.body.classList.remove("resize-animation-stopper");
  }, 400);
});

现在，我们在 <body> 上有一个 resize-animation-stopper 类，可以强制禁用窗口调整大小期间的任何过渡或动画，并在超时清除后消失。

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

可能存在比 setTimeout 更高效的方式来实现这一点，但这只是概念。我在这个网站上（v17）使用了它，因为我发现了一些严重的调整大小卡顿。它并没有完全消除卡顿，但明显改善了。

这是一个例子

查看笔
调整大小后关闭动画？作者：Chris Coyier (@chriscoyier)
在 CodePen 上。

该演示主要用于展示工作代码。可能没有足够的过渡来注意到明显的调整大小卡顿。

Russell Bishop

# 2019 年 10 月 14 日

将 animation-play-state 设置为暂停是否更好？

Chris Coyier

评论永久链接# 2019 年 10 月 14 日

也许吧？我想如果关闭的是实际的 animation，它会从停止的地方继续？似乎是个好主意。我不太会想到这一点，因为我敢打赌，我所认为的 CSS 中 95% 的 animation 都是过渡。

Omer Okcuoglu

您不能使用带有调整大小事件的 body:hover EventListener 重新激活动画，而不是依赖具有任意时间的 setTimeout 吗？

Davor Suljic

# 2019 年 10 月 15 日

我创建了一个纯 CSS 解决方案，其中 animation-play-state 在整个页面包装器的悬停状态下被激活。当鼠标移出窗口（例如在调整窗口大小时）时，动画会停止。

:root {
  --playing-state: paused;
}

#main-wrapper:hover {
  --playing-state: running;
}

.anim {
  ...
  animation: simpleAnim 2s linear infinite alternate;
  animation-play-state: var(--playing-state);
}

评论