Home

# Class goog.fx.css3.Transition

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}
    ]

extends goog.fx.TransitionBase

Instance Method Summary

`disposeInternal()`

Unattach listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners, it should be something like this:

    MyClass.prototype.disposeInternal = function() {
    MyClass.superClass_.disposeInternal.call(this);
    // Dispose logic for MyClass
    };

| `pause()` Pausing CSS3 Transitions in not supported.
| `play(boolean= opt_restart) ⇒ boolean` Plays the animation.
| `play_()` Helper method for play method. This needs to be executed on a timer.
| `stop(boolean= opt_gotoEnd)` Stops the animation.
| `stop_(boolean stopped)` Helper method for stop method.