search

goog.fx.css3.Transition

Provided By
Extends
All Implemented Interfaces

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:

   var animation = new goog.fx.css3.Transition(
     element,
     duration,
     {width: 10px, height: 10px},
     {width: 100px, height: 100px},
     [
       {property: width, duration: 1, timing: 'ease-in', delay: 0},
       {property: height, duration: 1, timing: 'ease-in', delay: 1}
     ]
   );

new Transition( element, duration, initialStyle, finalStyle, transitions )

Parameters
element(Element|null)

The element to be transitioned.

durationnumber

The duration of the transition in seconds. This should be the longest of all transitions, including any delay.

initialStyle(Object|null)

Initial style properties of the element before animating. Set using goog.style.setStyle.

finalStyle(Object|null)

Final style properties of the element after animating. Set using goog.style.setStyle.

transitions({delay: number, duration: number, property: string, timing: string}|string|Array<({delay: number, duration: number, property: string, timing: string}|string)>|null)

A single CSS3 transition property or an array of it.

VIEW SOURCE

Instance Methods

Instance Properties