Thursday, January 15th, 2009
He has an innovative approach that uses XBL and HTC bindings to detect when a style rule changes and thus when the selected elements need to be animated/transitioned into the newly matched transition style rule:
Declarative animations in CSS are an attractive solution, and I wanted to use the technology today.
I therefore developed a prototype script 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.
He then goes on to talk about the subtle issues. Very nice work indeed Weston!
Posted by Dion Almaer at 5:09 am