Detect if element is animated with css3?

[Anonymous]

When animating elements with jQuery, you can detect if the animation is in progress by using $(':animated').length;. How can this be achieved if the animation or transition is applied with css?

here are two working samples to show what I mean…

The first sample toggles a div using jQuery’s slideToggle method. The $(':animated').length; returns false to prevent the animation from excessively firing when rapidly clicking.

The second sample mimics the same behavior, but uses css3 for the transition / animation effect. Because of this, the $(':animated').length; no longer works.

Sample 1: http://jsfiddle.net/vunu2/

Sample 2: http://jsfiddle.net/aKmvP/

To recreate the issue, rapidly click the toggle button. You’ll notice the jQuery version will complete the current animation before starting the next. The css3 version will stop midway to start the next.

[Paulie_D]

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

http://www.sitepoint.com/css3-animation-javascript-event-handlers/

[Anonymous]

@paulie_d

Thanks for the resources. I actually just read that first article before posting my question here. Unfortunately, I’m still having difficulties figuring out how those methods can translate to my issue. Any suggestions?

[__]

Well, the most “oldschool” way would be to set a var as a “flag” to track when the transition is in progress, and only toggle the class if it is not. When you toggle the class name, make this transitioning status flag true. You can listen for the transitionend event (using jQuery’s one() method, just like in the example @Paulie_D linked to), and set the flag back to false when the transition is done.

example

[Anonymous]

Thanks @traq

[Author]

Posts