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.
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>