Example: Basic Node Transitions

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

<div id="demo">
    <a href="#" title="run the animation"></a>
</div>

<script type="text/javascript">
YUI().use('transition', function(Y) {
    var node = Y.one('#demo');

    node.one('a').on('click', function(e) {
        e.preventDefault();
        
        node.transition({
            duration: 1, // seconds
            easing: 'ease-out',
            height: 0,
            width: 0,
            left: '150px',
            top: '100px',
            opacity: 0
        }, function() {
            this.remove(); 
        });
    });
});
</script>