如何使用 Javascript 短暂暂停动画？

【问题标题】：How To Briefly Pasue Animation Using Javascript?如何使用 Javascript 短暂暂停动画？
【发布时间】：2019-03-28 16:43:07
【问题描述】：

我正在尝试暂停加载动画，因为我希望它通过滚动来重置，但我不想立即这样做。

<div id="progressbar">
  <div id="loading" class="run-animation"></div>
</div>

    <script>

"use strict";

var element = document.getElementById("loading");

document.addEventListener("mousewheel", function(e){
  e.preventDefault;

  void element.offsetWidth;
  element.classList.add("run-animation");
}, false);

</script>

【问题讨论】：

标签： javascript progress-bar css-animations loading mousewheel

【解决方案1】：

您可以添加新课程pause-animation，如下所示。每当你想暂停你的元素时，只需将这个类添加到元素，如element.classList.add("pause-animation")。您也可以将其移除来播放。

.pause-animation{
    animation-play-state: paused;
}

【讨论】：

您好，感谢您的快速回复。动画需要再次运行。我想要延迟的主要原因是用户不会不断地重新加载加载栏。