Question

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

＆＃13;

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) {
    
  }
});

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

Answer 1

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

此属性需要注意的一点是，它不会返回速记属性名称。相反，它将为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>

检测转换端的属性

1 个答案: