1

How to detect via js if any sort of transition is being applied to the element right now?

Short story of my problem:

I have a situation where I'm firing a function on the transitionend event, but sometimes the element just don't have any transition being applied (because in firefox, for example, the user has clicked some element rapidly which makes the transition goes crazy and stop working) so I want to know when it doesn't work and just fire the function myself, skipping the transitionend. I am trying to avoid ugly solutions..

vsync
  • 103,437
  • 51
  • 275
  • 359
  • When your problem includes any specific browser, and the words "goes crazy and stops working" I don't know that there is a pretty solution... – Ryan Jan 15 '13 at 23:33
  • the specifics of the problem is not really an issue, and it's on all browsers.. i just gave a very specific example for the curios folks, but my question stands and it's something I would like to know even if I hadn't faced a problem. – vsync Jan 15 '13 at 23:45
  • I know, I was just giving you a hard time. I would actually like to know as well. I've run into problems with css-transitions before, as is evidenced by this question: http://stackoverflow.com/questions/7288977/element-style-display-none-not-working-in-firefox-but-is-in-chrome – Ryan Jan 15 '13 at 23:48

1 Answers1

0

As specified by W3C Editor's Draft - CSS Transition

The ‘transitionend’ event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

So, I think there's not a valid simple way to solve this problem. The solution is left to the implementation (the browser) which decide if it does or doesn't render the transition at all.

Maybe, a solution could be to attach a listener to the element that fires the transition and after a specific elapsed time it checks if the transitioned element has the required CSS attributes set, and if those attributes aren't set as expected you can run your function by yourself.

Ragnarokkr
  • 2,300
  • 2
  • 19
  • 30
  • yes I've thought about using some setTimeout method but..it's just ugly. i'm very surprised there is no "ongoingTransition" flag in the W3C draft or something of the sort. – vsync Jan 16 '13 at 00:13
  • yes, it's a big limit, I hope when they will reach the final specifications, more events will be available. But currently, I guess the only way is to rely on custom timed functions which simulate the missing event callbacks. – Ragnarokkr Jan 16 '13 at 00:26
  • that means synchronizing the timing of the CSS and the JS manually..tedious. – vsync Jan 16 '13 at 00:59