html - 当多个运行时，是否可以检测到最后一个 CSS 转换的结束？

Question

如果一个元素的多个 css 属性发生变化并且它们具有不同的过渡持续时间，是否有一种方法可以检测到最后一个/最长运行过渡的完成。

例子:

<style>
.box {
    width: 100px;
    height: 100px;
    transition: width 0.5s, height 6s;
}

.animate {
    width: 400px;
    height: 400px;
}
</style>

<div class="box"></div>

<script>

  // I want to run some code after both the width and height transitions
  // are complete

  // Listening for transitionend events will fire on every transition 
  // that ends. So in this case, both width and height. Assume I don't 
  // know how many properties are being transitioned.
  $('.box').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(ev) {
       // ...
  });
  $('.box').addClass('animate');

</script>

Answer 1

你可以找出转换的次数，然后倒数。

var box = document.getElementsByClassName('box')[0];
numTransitions = getComputedStyle(box).transition.split(',').length;

如果你的 CSS 不干净，那会有点脆弱，但也许你可以控制它