Javascript: Is there a CSS transition start event?

Question

I found the transition end events, but I need a transition start event. Is there such thing?

Why would you need it, shouldn't you know when you start a transition ? — adeneo
– adeneo, Commented Jan 19, 2014 at 15:59
@adeneo, mainly for other modules reacting on transitions initiated elsewhere. That would be nice to have :) — Frédéric Hamidi
– Frédéric Hamidi, Commented Jan 19, 2014 at 16:01
@adeneo: Not always does a property change really start a transition - you would need additional logic to test whether one expects a transition. — Bergi
– Bergi, Commented Jan 19, 2014 at 17:38

Reed Spool · Accepted Answer · 2015-10-20 03:48:23Z

13

No, not yet. (reiterating @Frédéric Hamidi's comment.)

Consider broadcasting your own event with an event aggregator, mediator, or pub/sub. These all mean basically the same thing: Instead of waiting for JavaScript's DOM/CSS event specs to catch up with your needs, make your own global/near-global event management system, or use custom events in whatever event framework you're already using.

For example, you can use custom jQuery events:

// Transition target (body, for example)
var $body = jQuery(document.body);

// Register our transition starting function (left as exercise)
$body.on('transition_start', startFunction);

// Start the transition...
$body.addClass('transitioning')
    // ... and let everyone know
    .trigger('transition_start');`

edited Oct 20, 2015 at 3:48

answered Jun 2, 2014 at 2:11

Reed Spool

8397 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

durrrr Over a year ago

Well that's a bit radical to remove the question if this didn't help. It wouldn't exactly help me, if I was in OP shoes and the question got already answered in comments anyway

Reed Spool Over a year ago

You are right @durrrr that was not right of me, deleted

salvolds Over a year ago

Good hint thanks. But if I have to play a transition on the body I would refactor like this: function startFunction(){$body.addClass('transitioning');} $body.trigger('transition_start');

Reed Spool Over a year ago

@salvolds can you expand on why?

salvolds Over a year ago

Sure. Considering that the transition will start immediatly after $body.addClass('transitioning') is called, using your code it is unnecessary to trigger an event to start the transition because is has already been started. Instead with my refactoring suggestion you can trigger the event exactly to start the transition.

|

mnsth · Accepted Answer · 2016-10-06 08:02:00Z

9

UPDATE: transitionstart and transitioncancel are both in the CSS Transitions 2 specification, being developed currently in Editor's Draft status.

If you didn't know, transitionstart is implemented in Internet Explorer 10 and above. It's not in any spec and is thus a non-standard feature. It's unprefixed and generally safe to use, I'd assume, since this is how it would be implemented when (or if) arriving in a spec - so maybe you could do a conditional like this:

if ("transitionstart" in window) { 
    object.addEventListener("transitionstart", function() { 
        // IE 10 + and Edge
    });
}
else { 
    // fallback
}

The only kind of "discussion" I could find regarding the issue is this mail sent to the W3C by @Daniel Trebbien, asking about the possibility for including new transition events like transitionstart and transitioncancel into the spec. He hasn't even got a reply from someone, that's really sad.

edited Oct 6, 2016 at 8:02

answered Mar 22, 2015 at 15:16

mnsth

2,3071 gold badge19 silver badges23 bronze badges

3 Comments

jacobq Over a year ago

It seems that IE10 is the only browser that supports it at this time: developer.mozilla.org/en-US/docs/Web/Events/transitionstart

mnsth Over a year ago

@iX3 Yes, IE 10, IE 11 and Microsoft Edge supports it as of now.

piotr_cz Over a year ago

Apparently It's available in FF 53, but not in Chrome 60

Collectives™ on Stack Overflow

Javascript: Is there a CSS transition start event?

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related