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>