Transition: Basic Node Transitions
The transition method animates the value of each property from the current value to the given value.
Click the X to run the animation.
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.
<script> YUI().use('transition', function(Y) { Y.one('#demo').transition({ duration: 1, // seconds easing: 'ease-out', height: 0, width: 0, left: '150px', top: '100px', opacity: 0 }); }); </script>
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.
<script> var node = Y.one('#demo'); node.transition({ duration: 1, // seconds easing: 'ease-out', height: 0, width: 0, left: '150px', top: '100px', opacity: 0 }, function() { node.destroy(true); });
