Question

是否可以提前结束CSS动画，基于从一开始就以毫秒为单位的时间，仍然可以触发transitionend事件？

以

开头的小提琴

编辑：早期停止前的过渡持续时间和持续时间在过渡开始前的JS中计算。同样在现实生活中，通过使用JS应用内联样式来触发转换。不知道这是否有帮助。

var animateEl = document.querySelector('.animate'),
    resultEl = document.querySelector('.result');

animateEl.addEventListener('transitionstart', function(e){
  window.animationStartTime = performance.now();
  resultEl.innerHTML = '';
})
animateEl.addEventListener('transitionend', function(e){
  resultEl.innerHTML = 'Animation took: '+ Math.round(performance.now()-window.animationStartTime) +'ms';
});

.parent{
  height:300px;
  box-shadow:0 -100px 0 0 rgb(255,150,150) inset, 0 -200px 0 0 rgb(150,255,150) inset;
}
.animate{
  height:100px;
  background-color:rgba(0,100,200,0.6);
  transition:height 2000ms cubic-bezier(0.645,0.045,0.355,1);
}
.animate:hover{
  height:300px;
}

<div class="parent">
  <div class="animate">
    We want to launch the animation for the duration of 2000ms, but prematurely end it for example after 1000ms. So it doesn't reach red zone.
  </div>
</div>
<p class="result"></p>

Answer 1

Highdef's comments建议您只使用CSS做得最好，尽管我不了解用例。为什么动画总是停在中途，当你可以定义一个只走到一半并让它运行一半时间的动画时？

使用JavaScript至少可以停止/启动动画并获得进度，但您可能会遇到浏览器兼容性和复杂性问题。您可以轻松地disable transitions and animations，并且可以使用CSSOM来确定动画中的进度并进行相应调整。 CSS Trick's有一篇很棒的文章，“Controlling CSS Animations and Transitions with JavaScript.”在我看来，为了获得很多收益，这是一项很多工作。

如何过早地结束CSS过渡（基于从一开始的时间）

1 个答案: