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

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中. (我不知道元素上有多少转换,知道哪个是最后一个)

最佳答案
transitionEnd在事件对象中返回名为propertyName的属性.
Source

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

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

转载注明原文:javascript – 具有多个转换的transitionEnd事件,检测最后一次转换 - 代码日志