Finding the end of transition property
I tried to detect the property from which the transition is completed in case of multiple transitions of the same element with different delay, for example:
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>
source to share
You can use the property propertyName
that comes with the event transtionend
to find the name of the property that transition
has ended.
One note with this property is that it will not return abbreviated names. Instead, it will return the following long name names for the property border-color
:
-
border-left-color
-
border-right-color
-
border-top-color
-
border-bottom-color
Note. For some reason, propertyName
JS event object property access does not work in Firefox (but does work in Chrome). Using the jQuery event object instead seems to work as expected. One can only assume there are some browser inconsistencies that jQuery does a good job 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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
source to share