标签：css3 css-transitions css javascript jquery

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。