javascript - 为什么动画播放状态一直是running？

Question

即使在使用 animation-iteration-count 到 1 和animation-fill-mode 到 forwards:

var isRunning = window.getComputedStyle(
  document.querySelector('div')
).getPropertyValue('animation-play-state');

setInterval(function(){
  console.log(isRunning);
},1000)

@keyframes foo {
 0% { 
   width: 0;
 }
 100% {
  width: 50%;
 }
}

div {
 animation: foo 2s linear 0s 1 normal forwards;
 background-color: #f00;
 height: 3px;
}

<div></div>

我应该让animation-play-state在动画结束时被paused。

---

实际上，我提供的以下答案对我不起作用。事实上，我正在使用一个伪元素，而伪元素不接受 addEventListener。因此，我的最终解决方案是仅使用这种方式。

var isRunning = window.getComputedStyle(
      document.querySelector('div'), ':after'
).getPropertyValue('animation-play-state');

遗憾的是，CSS 似乎没有在动画结束时将播放状态设置为暂停。总结这个问题没有发现或解决方案？

Answer 1

一旦动画完成所有迭代，animation-play-state 的值就不会改变。

您需要监听 animationend 事件并手动更改值:

document.querySelector('div').addEventListener('animationend', function() {
  this.style.animationPlayState = 'paused';
  console.log(window.getComputedStyle(this).getPropertyValue('animation-play-state'));
});

@keyframes foo {
 0% { 
   width: 0;
 }
 100% {
   width: 50%;
 }
}

#foo {
 animation: foo 2s linear 0s 1 normal forwards;
 background-color: #f00;
 height: 3px;
}

<div id=foo></div>

...尽管当您的 animation-fill-mode 已经设置为 forwards 时，我真的看不出有任何理由这样做。