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

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'); }); ```