0N/A<link href="{{componentAssets}}/transition.css" rel="stylesheet" type="text/css">

2362N/A<div class="intro">

0N/A <p>the <code>transition</code> method animates the value of each property from the current value to the given value.

0N/A Click the X to run the animation.</p>

0N/A</div>

0N/A

2362N/A<div class="example">

0N/A{{>transition-basic-source}}

2362N/A</div>

0N/A

0N/A<h2>Using the Transition Method</h2>

0N/A<p>Transition allows you to animate one or more properties from their current value to a given value with the specified duration and easing method.</p>

0N/A

0N/A```

0N/A Y.one('#demo').transition({

0N/A duration: 1, // seconds

0N/A easing: 'ease-out',

0N/A height: 0,

0N/A width: 0,

0N/A left: '150px',

2362N/A top: '100px',

2362N/A opacity: 0

2362N/A });

0N/A});

0N/A```

0N/A

0N/A<h2>Transition with Callback</h2>

0N/A<p>The <code>transition</code> method provides an optional callback argument, which is a function that runs once the transition is completed. The callback runs only for this transition.</p>

0N/A

0N/A```

0N/A var node = Y.one('#demo');

0N/A

0N/A node.transition({

0N/A duration: 1, // seconds

0N/A easing: 'ease-out',

0N/A height: 0,

0N/A width: 0,

0N/A left: '150px',

0N/A top: '100px',

0N/A opacity: 0

0N/A }, function() {

0N/A this.remove();

0N/A });

0N/A```

0N/A

0N/A<h2>Complete Example Source</h2>

0N/A```

0N/A{{>transition-basic-source}}

0N/A```

0N/A