检测过渡端的属性

Question

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

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>

Answer 1

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

此属性需要注意的一件事是它不会返回简写属性名称。相反，它将返回border-color属性的以下普通名称：

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

注意：出于某种原因，访问propertyNameJS 事件对象的属性在 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>