检测过渡结束属性

Detect property of the transition end

我试图检测属性在同一元素的多个转换具有不同延迟的情况下完成转换,例如:

var cssTransitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
$('div').on(cssTransitionEnd, function(e) {
  var borderColorEnd, backgroundColorEnd;
  
  // Detect if this is border or background who ended ?
  
  if(borderColorEnd) {
    
  }
  if(backgroundColorEnd) {
    
  }
});
div {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 4px solid yellow;
  transition: border-color 1s, background-color 2s;
}
div:hover {
  border-color: green;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

您可以使用 transtionend 事件附带的 propertyName 属性 来查找 transition 已结束的 属性 的名称。

关于此 属性 的一件事是它不会 return shorthand 属性 名称。相反,它将 return border-color 属性 的以下普通名称:

  • border-left-color
  • border-right-color
  • border-top-color
  • border-bottom-color

注意: 由于某些原因,访问JS事件对象的propertyName 属性在Firefox上似乎不起作用(但在Chrome).使用 jQuery 的事件对象而不是它似乎按预期工作。只能假设 jQuery 为我们很好地解决了一些浏览器不一致问题。

var cssTransitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
$('div').on(cssTransitionEnd, function(event) {

  /* Just to make the output obvious :) */
  $('div').html($('div').html() + event.originalEvent.propertyName + '<br>');

});
div {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 4px solid yellow;
  transition: border-color 1s, background-color 2s;
}
div:hover {
  border-color: green;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>