transitionend is not fired when initial state and final state are the same

Question

In the example below I'm doing background-color transition using CSS and trying to handle transitionend event for both divs.

Unfortunately, transitionend is not fired for div2 as initial and final background colors are the same:

 var div1 = $('#div1'); var div2 = $('#div2'); $('#toggle').on('click', function() { div1.toggleClass('toggled'); div2.toggleClass('toggled'); }) div1.on('transitionend', function() { console.log('div1 transitionend') }) div2.on('transitionend', function() { console.log('div2 transitionend') })

 div { width: 100px; height: 100px; transition: background-color .5s; } #div1 { background-color: red; } #div2 { background-color: green; } .toggled { background-color: green !important; }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div id="div1"></div> <div id="div2"></div> <button id="toggle">Toggle animation</button>

How can I achive handling transitionend even in cases when initial state and final state are the same?

Answer 1

A transition generally occurs when a style-change-event occurs. That is, when the style of an element (a property or more's value) changes, the transition is started. The W3C Specs (as expected) doesn't define when a style change event is triggered and leaves it to the implementation.

Below is the most that I could find in W3C Specs about this particular topic (2 ^nd para below anchor):

When a style change event occurs, implementations must start transitions based on the computed values that changed in that event.

Actually the below seems to be even more conclusive definition of when a transition should start. This is found towards the end of the section pointed to by this anchor :

If all of the following are true:

• the element does not have a running transition for the property,
• the before-change style is different from and can be interpolated with the after-change style for that property ,
• the element does not have a completed transition for the property or the end value of the completed transition is different from the after-change style for the property,
• there is a matching transition-property value, and
• the combined duration is greater than 0s,

then implementations must remove the completed transition (if present) from the set of completed transitions and start a transition whose :

• start time is the time of the style change event plus the matching transition delay,
• end time is the start time plus the matching transition duration,
• start value is the value of the transitioning property in the before-change style,
• end value is the value of the transitioning property in the after-change style,
• reversing-adjusted start value is the same as the start value, and reversing shortening factor is 1.

---

Now based on my understanding of how UAs work and how they would have been optimized, I do not see any reason for them to fire a transition start event when none of the properties set on the element is undergoing a change. It would be a overkill and extra load on the UA which could easily be avoided. When there is no transition start event itself, there is almost no way that a transition end event will be fired in such cases.

So, it looks like you'd most likely have to use some dummy property changes (or) use a timer whose value is equal to the transition-duration + transition-delay to mimic the transitionend .