Question

我正在使用CSS动画制作进度条。

当用户点击按钮时，会添加searching课程
searching类的样式为CSS动画，需要100秒

由于这是一个用于搜索的进度条，因此有时搜索将花费少于动画时间 - 此时我希望动画结束。我已经为JSFiddle添加了超时。

然而添加类以使进度条100％宽度（动画的最终状态）不起作用的超时。浏览器仍然将进度条显示为动画使用的任何宽度，直到动画完成。

如何使用JavaScript尽早结束CSS动画？

Answer 1

您可以更改进度的animation-duration：

  &.completed {
    width: 100%;
    animation-duration: 3s;
  }

以下是工作示例：
https://jsfiddle.net/kmer8s5c/2/

Answer 2

您可以将completed班级移到searching之外，这样动画就不再适用了，只需删除searching班级：

SCSS：

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #222;
  .completion {
    width: 0%;
    height: 20px;
    background-color: green;
    &.searching {
      animation-duration: 60s;
      animation-name: show-progress;
      animation-fill-mode: forwards;
    }
    &.completed {
      width: 100%;
    }
  }
}

JS：

setTimeout(function(){
  progress.classList.remove('searching')
  progress.classList.add('completed') 
  console.log('Added completed')
}, 1*1000)

此处an updated fiddle。

我怎样才能早点结束CSS动画？

2 个答案: