mobile FSS transitions model
Jacob Farber
jacob.farber at utoronto.ca
Fri Jun 12 17:28:50 UTC 2009
Hi everyone,
Heidi and I are super excited about the great CSS3 featues the webkit team has put out there for everyone to play with - especially the features that enable web-based emulation of native iPhone concepts, such as transitions.
A breakdown of CSS3 transitions in WebKit can be found here:
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4-SW1
Using the FSS approach, we're trying to put together some ideas on how we can make transitions as easy as possible for people to hit the ground running with meaningful class names, yet also extend things to their hearts content. That being said, here's what we're thinking:
* Transitions are in a seaprate CSS file - this way you can include them if you want them
* Transitions themselves will be split up into specific class names, and might come with pre-transition setup class names too
* Transition class names will look something like "fl-transition-slide" or "fl-transition-fade" or "fl-transition-dissolve" - made to sound like common laguage in animation/editing software
* In/Out points for your transitions might look like "fl-transition-slide-right-out" or "fl-transition-fade-in" - echoing the above point, these will be what drives the transition itself
We might encapsulate complex transitions into single fx class names, such as "fl-transition-spinZoom", as well as allowing compound class names to stack multiple transitions on top of each other.
A working example of this strategy will be coming soon.
We would love to hear any feedback or thoughts on this!
Thanks
Jacob
More information about the fluid-work
mailing list