#

Jump to Table of Contents

# Transition

The Transition Utility provides an API for creating advanced transitions between style property values. Native CSS Transitions are used when possible.

## Getting Started

To include the source files for Transition and its dependencies, first load the YUI seed file if you haven't already loaded it.

    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

Next, create a new YUI instance for your application and populate it with the modules you need by specifying them as arguments to the `YUI().use()` method. YUI will automatically load any dependencies required by the modules you specify.

    <script>
    // Create a new YUI instance and populate it with the required modules.
    YUI().use('transition', function (Y) {
        // Transition is available and ready for use. Add implementation
        // code here.
    });
    </script>

For more information on creating YUI instances and on the `use()` method, see the documentation for the YUI Global Object.

## Using Transitions

### Transition Method

The Transition Utility adds the `transition` method to `Node` instances when the `transition` module is included. The method accepts a configuration object, and an optional callback function. The config may include one or more `CSS` properties to be transitioned, an optional `duration` (in seconds), `delay`, and `easing` for fine-tuning transition behavior. Calling the `transition` method begins the transition. The `callback` is run after the transition has completed.

    Y.one('#demo').transition({
        easing: 'ease-out',
        duration: 0.75, // seconds
        width: '10px',
        height: '10px'
    }, function() {
        this.remove();
    });

### Supported Easings

Transition supports the following easings:

Easing | Description
--- | ---
`cubic-bezier` | Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.
`ease (default)` | equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)
`linear` | equivalent to cubic-bezier(0, 0, 1, 1)
`ease-in` | equivalent to cubic-bezier(0.42, 0, 1, 1)
`ease-out` | equivalent to cubic-bezier(0, 0, 0.58, 1)
`ease-in-out` | equivalent to cubic-bezier(0.42, 0, 0.58, 1)

Transition easings are defined as part of the CSS3 Transition Module. See the full specification for further details.

### Property Specific Attributes

The Transition Utility also allows for property specific attributes. Each attribute may optionally have its own `duration`, easing, and/or `delay`. This provides much finer control over the transition timeline, enabling more complex effects.

    Y.one('#demo').transition({
        duration: 0.75,
        easing: 'ease-out',

        height: 0,

        width: {
            delay: 0.75,
            easing: 'ease-in',
            value: 0
        },

        opacity: {
            delay: 1.5,
            duration: 1.25,
            value: 0
        }
    });

### Listening for Events

The Transition Utility provides optional notifications for reacting to the start and end of a transition. These can be subscribed to via the `on` attribute of the transition config.

    var node = Y.one('#demo');

    Y.one('#demo').transition({
        duration: 1,
        height:0,

        width: {
            delay: 1,
            duration: 0.5,
            value: 0
        },

        on: {
            start: function() {
                Y.log('start');
            },

            end: function() {
                Y.log('end');
            }
        }
    });

For simplicity, an end handler can also be added as a function callback:

    Y.one('#demo').transition({
        duration: 1,
        height:0,

        width: {
            delay: 1,
            duration: 0.5,
            value: 0
        }
    }, function() {
        Y.log('end');
    });