The transition method animates the value of each property from the current value to the given value. Click the X to run the animation.

{{>transition-basic-source}}

Using the Transition Method

Transition allows you to animate one or more properties from their current value to a given value with the specified duration and easing method.

``` Y.one('#demo').transition({ duration: 1, // seconds easing: 'ease-out', height: 0, width: 0, left: '150px', top: '100px', opacity: 0 }); ```

Transition with Callback

The transition method provides an optional callback argument, which is a function that runs once the transition is completed. The callback runs only for this transition.

``` var node = Y.one('#demo'); node.transition({ duration: 1, // seconds easing: 'ease-out', height: 0, width: 0, left: '150px', top: '100px', opacity: 0 }, function() { this.remove(); }); ```

Complete Example Source

``` {{>transition-basic-source}} ```