javascript-检测过渡端的属性

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

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属性来查找其转换已结束的属性的名称.

此属性要注意的一件事是它不会返回速记属性名称.相反,它将为border-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>

标签：css3,css-transitions,css,javascript,jquery
来源： https://codeday.me/bug/20191028/1949100.html