CODEWITHSUNDEEP
javascriptcsscss-transitions
thelolcat
thelolcat

Reputation: 11545

transitionend event not firing when there's no transition

check it out:

http://jsfiddle.net/jqs4yy0p/

JS

$('div').addClass('switch').on('transitionend', function(e){
    alert('end');
});

CSS

div {
    background-color: red;    
    /*transition: background-color 1s;    */
}

div.switch{
    background-color: blue;
}

if you uncomment the transition property it works, but without it no event is being fired!!

So if I make a slider thing, and want to preload next image after the transition effect completes I have to rely on the fact that there is a transition effect in the css. if there isn't the whole thing will break.

Doesn't this make transitions useless because you still have to mix them with javascript code in order to control them?

Upvotes: 3

Views: 4084

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

Just to get things straight - the event transitionend (or any related javascript) is in no way needed to use or control CSS transitions/animations (which makes them completely independent, although, as a sidenote, CSS transitions/animations can be triggered using js, which can again sometimes be a very useful addition to the basic possibilities offered by the CSS interface).

Listening in on transitionend events can serve as a great tool when you are adding javascript functionality to your page as it makes your javascript aware of transition events triggered by the CSS.
E.g.: "I want to execute some javascript, but if there is a transition (triggered by the CSS), i want to wait for it to finish first."

Using something like

$('div').css('transitionDuration') !== '0s'

you can check if your object has a transition set.

QUICK DEMO (based on your jsfiddel)

And to get back to your "slider thing" example ... just swapping the images with js (will work just fine, already without the smooth transition effect) and adding CSS transitions for a reacher UX. Living the transitions out of the equation will probably effect the functionality less than living out some other parts of the CSS (position,width,height,opacity...).

Maybe I am failing to see your question here ... but IMHO the existence of events/listeners that give you the possibility to detect (or manipulate) CSS transitions/animations does in no way make these useless or redundant. To me it sounds similar to saying CSS pseudo elements are redundant as you can just add additional elements to your markup ... of course you can do it either way ... but I just like to keep my content (html), styling (CSS) and logic (JS) layers separate (but in the end it comes down to the specific problem at hand and of course to your personal preferences).

Upvotes: 2

Related Questions