The goog.fx.css3 Namespace

The goog.fx.css3.Transition Class

A class to handle targeted CSS3 transition. This class handles common features required for targeted CSS3 transition. Browser that does not support CSS3 transition will still receive all the events fired by the transition object, but will not have any transition played. If the browser supports the final state as set in setFinalState method, the element will ends in the final state. Transitioning multiple properties with the same setting is possible by setting Css3Property's property to 'all'. Performing multiple transitions can be done via setting multiple initialStyle, finalStyle and transitions. Css3Property's delay can be used to delay one of the transition. Here is an example for a transition that expands on the width and then followed by the height: 

   initialStyle: {width: 10px, height: 10px}
   finalStyle: {width: 100px, height: 100px}
   transitions: [
     {property: width, duration: 1, timing: 'ease-in', delay: 0},
     {property: height, duration: 1, timing: 'ease-in', delay: 1}
   ]
… more

.fade(element, duration, timing, startOpacity, endOpacity)

Creates a transition to fade the element.

element {Element}
The element to fade.
duration {number}
Duration in seconds.
timing {string}
The CSS3 timing function.
startOpacity {number}
Starting opacity.
endOpacity {number}
Ending opacity.
returns {!goog.fx.css3.Transition}
The transition object.

.fadeIn(element, duration)

Creates a transition to fade in the element.

element {Element}
The element to fade in.
duration {number}
Duration in seconds.
returns {!goog.fx.css3.Transition}
The transition object.

.fadeOut(element, duration)

Creates a transition to fade out the element.

element {Element}
The element to fade out.
duration {number}
Duration in seconds.
returns {!goog.fx.css3.Transition}
The transition object.

Documentation generated using JvJsDoc, version 0.5 on 2012-09-03.