Now that we have class based transitions in the browser, we can trigger simple animations by adding and removing classes instead of relying on jQuery's .animate(). There are some advantages to class based animation, not least of which is the fact that it progressively enhances normal classes, but we do lose some functionality that .animate() provides - notably callbacks on animation end, and the ability to animate to 'hide', where display: none; is applied at the end of the animation. These two methods address these problems.

New in 1.8 - transitions to and from 'auto'

• Adds support for transitions to and from 'auto' values, for the CSS properties height, width, margin-left and margin-right.
• Adds support for multiple transitions of different durations (not yet in the IE fallback).

New in 1.6 - IE fallback!

Automatic fallback to jQuery's .animate() in IE6, IE7, IE8 and IE9 allowing you to write transitions in CSS and have them display in these browsers, too. Support is basic for the moment, but works if you stick to a few rules.

• CSS must be written: transition: width 0.4s ease-in [, property duration easing];. Long-hand properties not supported. Yet.
• Supports any number of property definitions, but animates them all at the last defined duration (avoids launching multiple calls to .animate()).
• Supports animations on the current element only. That is, children that have transitions defined will not be animated. (Finding them all could, potentially, be expensive).
• Supports transition timing CSS values 'linear', 'ease', 'ease-in', 'ease-out' and 'ease-in-out'. cubic-bezier(n,n,n,n) not yet supported.

Methods

.addTransitionClass( className, options )
.removeTransitionClass( className, options )

Adds or removes the class className to the node. In addition, the class 'transition' is added for the duration of the transition, allowing you to define styles before, during and after a transition. Where support for CSS transitions is not detected, .addTransitionClass() and .removeTransitionClass behave as .addClass() and .removeClass() respectively. The class 'transition' is not added, and the callback is called immediately after the className is applied.

Options

callback

function() Called at the end of the CSS transition, or if CSS transition support is not detected, directly after className has been applied. Where fallback is defined, callback is passed to fallback as the second argument.

fallback

function(class, callback) Overrides the default fallback, which provides automatic animation for transitions on this element in IE6, IE7, IE8 and IE9. The fallback is only called when native CSS transition support is not detected, typically allowing you to define jQuery animations to replace the missing CSS transitions.

An example

Meet Jim.

.jim {
  display: none;
  opacity: 0;
  /* For IE */
  filter: alpha(opacity=0);
-webkit-transition: opacity 0.06s ease-in;
-moz-transition: opacity 0.06s ease-in;
transition: opacity 0.06s ease-in;
}
.jim.active {
display: block;
opacity: 1;
/* For IE */
filter: alpha(opacity=100);
}
.jim.transition {
display: block;
}

Jim is hidden until:

jQuery('.jim').addTransitionClass('active')

...at which point he becomes a block and fades in to opacity: 1. On:

jQuery('.jim').removeTransitionClass('active')

...he fades out again, and then is removed from display.

Note that if you try doing this simply by adding and removing the class active, you get some surprising results. When you add active, Jim appears at full opacity, without any transition. The browser does not judge a transition applicable because it has just rendered Jim for the first time, with display: block; opacity: 1. Jim disappears just as quickly when you remove the class active, because he suddenly no longer has display: block. The transition class, along with .addTransitionClass() and .removeTransitionClass(), solve these problems.

More reading

Original blog post: http://stephband.info/using-jquery-to-manage-css-transitions

Help

Help improve me. Fork and help out!