Question

I am using CSS transitions to animate the removal of an element from the screen. In FireFox I use the “transitionend” event to detect when the transition is complete and then remove it from the DOM. This only works however if an transition actually occurs.

How can I tell, from JavaScript, whether the change in a property will ultimately result in a “transitionend” event being sent? If there is no transition then I must remove the element directly.

For clarity, I wish to know whether a change in property will trigger an event or not (FireFox is fine for now). This is because I need to trigger an action at the end of the transition, and if there will be no transition I need to trigger it immediately.

Answer 1

Here are the equivalents for transitionend for the major vendors (that support transitions):

• Webkit: webkitTransitionEnd
• Opera: oTransitionEnd
• IE and Mozilla: transitionend

To find out whether the property is being animated, simply check if it has reached the destination value immediately:

el = $('myElement');
el.css('top', '100px');
if(!el.css('top') == '100px'){
    alert('No transition');
}

Here is a demonstration: http://jsfiddle.net/6Q9XC/