Jquery.transitions is a project mainly written in JavaScript, it's free.
Feature detects CSS transition support and provides two methods – .addTransitionClass() and .removeTransitionClass() – that manage transitions.
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.
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.
transition: width 0.4s ease-in [, property duration easing];
. Long-hand properties not supported. Yet..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.
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.
Original blog post: http://stephband.info/using-jquery-to-manage-css-transitions
Help improve me. Fork and help out!