I sought to detect the property of which the transition is pleted in the case of several transitions of the same element with different delay, like:

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=".1.1/jquery.min.js"></script>
<div></div>

I sought to detect the property of which the transition is pleted in the case of several transitions of the same element with different delay, like:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

• javascript
• jquery
• css
• css-transitions

1 Answer 1

You can use the propertyName property that es with the transtionend event to find the name of the property whose transition has ended.

One thing to note with this property is that it will not return the shorthand property names. Instead it will return the following longhand names for the border-color property:

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

Note: For some reason, accessing the propertyName property of the JS event object does not seem to work on Firefox (but works on Chrome). Using jQuery's event object instead of it seems to work as expected. Can only assume that there is some browser inconsistencies that jQuery does a good job of solving for us.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>