CSS Transitions via jQuery Animation
(This project was published back in January 2009, and since the browser landscape has significantly changed. This code is made available here for historical purproses but it is not advisable to incorporate. I've also posted here the old comments from my blog since I'm now redirecting here.)
style property). Ideally, all of the animation triggers and presentation states would be declared in CSS. And this is exactly what the WebKit team has proposed in its CSS Transitions specification.
Since it's a new WebKit proposal, however, CSS Transitions has only been implemented in WebKit-based browsers like Safari and Chrome. While a enhancement bug has been filed to add CSS Transitions to Mozilla, it isn't likely going to land in the near future; likewise, support in MSIE may not even land in the distant future. Nevertheless, declarative animation in CSS is still an attractive solution, and I wanted to use the technology today. I therefore developed a prototype script (raw) which implements a subset of CSS Transitions via jQuery Animation (inspired by Chris Schneider's CSS Effects powered by mootools).
This implementation requires a binding language such as Mozilla's XBL or MSIE's DHTML Behaviors. Because of this, the script works in Firefox 2, Firefox 3, and MSIE 7 (IE 6 is not supported, but it does have limited functionality); in WebKit-based browsers the script does nothing since CSS Transitions are supported natively. Opera is not supported because it has no binding language. Why is a binding language required? The script parses the stylesheet rules looking for
transition-* properties, and when it finds one, it adds a binding to that style rule so that when the rule gets applied, the binding's code is executed on each of the newly selected elements. This enables transitions to get triggered when a class name is changed. The binding code knows the transition style properties which were defined in its containing style rule, so when it gets executed it transitions the elements' styles from the previously matched style rule to the styles defined in the newly matched style rule. Each of these style rules I'm calling transition states.
Now, as I already mentioned, this script implements a functional subset of CSS Transitions. It is important to remember and to follow the following restrictions:
Due in part to a bug in XBL which prevents a binding's
destructorfrom being called, only one transition state (style rule) may be applied at a time, thus transitioned properties may not be cascaded.
$('#foo').addClass('baz'); if(jQuery.browser.msie) $('#foo #bar').addClass('temp-ie-class').removeClass('temp-ie-class');
</li> <li><p>Likewise, a similar workaround was built into the script to support <code>:hover</code> selectors for transition rules in IE. If another element is dynamically added to the page after the DOM is loaded, you must call <code>cssTransitions.refreshDOMForMSIE()</code>. Currently neither the <code>:active</code> nor <code>:target</code> pseudo classes are working in IE for transition rules.</p></li>
See a lightweight example.
Unimplemented Features and To-do Items
transition-timing-functionproperty (currently only the default
- Allow different
transition-durations for each transition state.
- Add support for
:active(in IE) and
- Implement Transition Events.