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

Question

是否可以提前结束 CSS 动画，基于从开始的毫秒数，并且仍然触发 transitionend 事件？

小提琴开始

https://jsfiddle.net/Slava_B/4vLwtyxx/

编辑：过渡持续时间和提前停止前的持续时间是在过渡开始之前在 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 有一篇很棒的文章，“Controlling CSS Animations and Transitions with JavaScript.” 在我看来，这是很多工作却没有多少收获。