具有多个转换的transitionEnd事件,检测最后一次转换

Question

transitionEnd事件是在首先结束而不是最后结束的转换上触发的,这不是期望的行为.任何解决方法？

document.querySelector('a').addEventListener('transitionend', function(){
  var time = (new Date().getMinutes()) + ':' + (new Date().getSeconds());
  console.log('transitionEnd - ', time);
});

a{
  display:block;
  opacity:.5;
  width:100px;
  height:50px;
  background:lightblue;
}
a:hover{
  width:200px;
  height:100px;
  background:red;
  transition: 4s width,     /* <-- "transitionEnd" should fire after this */
              2s height,
              .5s background;  
}

<a>Hover me</a>

现在我检查Chrome(我不使用该浏览器),我看到该事件被调用3次,每次转换一次.无论如何,我需要它来解决最后一个,并在Firefox中.(我不知道元素上有多少转换,知道哪个是最后一个)

Answer 1

transitionEnd返回propertyName在事件对象中调用的属性。 来源

因此，您可以测试所需的属性并使用简单的逻辑来过滤回调：

document.querySelector('a').addEventListener('transitionend', function(event){
    if(event.propertyName !== 'width') return;
    console.log('transitionEnd - width!');
});