Question

即使在使用paused到animation-iteration-count和1到animation-fill-mode之后，我也无法使用css3动画将动画播放状态设为forwards ：

＆＃13;

var isRunning = window.getComputedStyle(
  document.querySelector('div')
).getPropertyValue('animation-play-state');

setInterval(function(){
  console.log(isRunning);
},1000)

＆＃13;

@keyframes foo {
 0% { 
   width: 0;
 }
 100% {
  width: 50%;
 }
}

div {
 animation: foo 2s linear 0s 1 normal forwards;
 background-color: #f00;
 height: 3px;
}

＆＃13;

<div></div>

＆＃13;

完成动画后，我应该animation-play-state为paused。

实际上，我提供的以下答案对我来说并不起作用。实际上，我正在处理一个伪元素，而伪元素并不接受addEventListener。所以，我的最终解决方案是使用这种方式。

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

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

Answer 1

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

您需要侦听animationend事件并手动更改值：

＆＃13;

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

＆＃13;

@keyframes foo {
 0% { 
   width: 0;
 }
 100% {
   width: 50%;
 }
}

#foo {
 animation: foo 2s linear 0s 1 normal forwards;
 background-color: #f00;
 height: 3px;
}

＆＃13;

<div id=foo></div>

＆＃13;

...虽然当animation-fill-mode已设置为forwards时，我真的没有理由这样做。

Answer 2

我不知道为什么css3会将动画播放状态保持为running，但请使用animationend事件：

var x = document.getElementById("myDIV");
x.addEventListener("animationend", function(){
  console.log('paused'); // animation is end
});

这里是animationend的参考：https://developer.mozilla.org/en-US/docs/Web/Events/animationend

为什么动画播放状态始终在运行？

2 个答案: