Fx.Transitions.js contains numerous transitions that are easier to demonstrate than they are to describe. Here is the documentation for Fx.Transitions.js.

Drag the redbox and see the transition when you release it:


Each transition features three modes: easeIn, easeOut, and easeInOut. So, for example, Fx.Transitions.Quad.easeIn is how you'd refer to it. The only transition that doesn't have these variables is Linear.

Additionally, you can create a custom transition by passing in a numeric parameter:

//Elastic.easeOut with user-defined value for elasticity.
var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
new Fx.Tween(element, {transition: myTransition.easeOut});

Fx.Transitions Shorthands

You can also refer to these transitions with a shorthand that's a little easier to remember and type:

new Fx.Tween(element, {transition: 'bounce:in'});
new Fx.Tween(element, {transition: 'sine:out'});
new Fx.Tween(element, {transition: 'elastic:in:out'});

mootorial/06-fx/03-fx.transitions.txt · Last modified: 2008/10/27 23:53