A5.u.elementtransition Method
Syntax
Arguments
- elementelementstring
A pointer to a DOM element or the ID of an element.
- settingsobject
The transition settings.
- fromobject
The initial CSS values from which the transition will occur.
- toobject
The target CSS values to transition to.
- afterobject
The target CSS values to set after transition.
- fireEventbollean
If set to true, then an event named "a5transitioncomplete" will be fired on the element once the transition is done, or "a5transitioncancel" if another transition is preformed on the element before the first is done. The default value is false.
- durationnumberstring
The duration of the transition in number of milliseconds, or a CSS time value string (for example "1s"). The default is 500 milliseconds.
- delaynumberstring
The delay of the transition in number of milliseconds, or a CSS time value string (for example "1s"). The default is 0 milliseconds.
- tweenstring
The CSS timing function to use for the transition. The default is "ease".
- onCompletefunction(cancel)
The function to call when the transition has completed. The scope of the function will be the element the transition occurs on.
Description
Programmatically perform a CSS transition.
Example
// assume "id" is the ID of a DIV that wants to be transitioned into view
var s = {
from: {transform: A5.u.css.transform2D('100%','0px'), opacity: 0}, // transition from the 100% to the right and transparent
to: {transform: A5.u.css.transform2D('0px','0px'), opacity: 1}, // transition to the original position and non-transparent
duration: 600, // in 600 milliseconds
delay: 200, // starting 200 milliseconds from now
tween: 'ease-out' // using the "ease-out" timing function.
}
A5.u.element.transition(id,s,function(){
this.className = 'shown'; // set the class name on the element to "shown"
});