javascript - 使用 JavaScript 播放或暂停 CSS 动画

Question

我不确定以下 JavaScript 行是否正确。单击按钮后，将调用以下 JavaScript 函数。此函数应在单击一次时暂停 CSS 动画，并在再次单击时恢复动画：

function myFunction()
    {
        document.getElementById("sky").style.animationPlayState = "paused | running";
    }

标签： javascriptcssanimation

Answer 1

确定将其更改为何种状态的逻辑需要在引号之外完成。您可能正在寻找更多类似的东西：

function myFunction()
{
  var sky = document.getElementById("sky");
  if(sky.style.animationPlayState == "paused")
  {
    sky.style.animationPlayState = "running";
  }
  else
  {
    sky.style.animationPlayState = "running";
  }
}

或者像这样在一行中：

element.style.animationPlayState = running ? 'paused' : 'running';