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