69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<link href="{{componentAssets}}/transition.css" rel="stylesheet" type="text/css">
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<div class="intro">
e44206c13bfa6bd78633ea09ac8aef91643e9d45Matt Sweeney <p>The <code>transition</code> method animates the value of each property from the current value to the given value.
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney Click the X to run the animation.</p>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<div class="example">
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney{{>transition-basic-source}}
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<h2>Using the Transition Method</h2>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<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>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney Y.one('#demo').transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1, // seconds
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney left: '150px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney top: '100px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<h2>Transition with Callback</h2>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<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>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney var node = Y.one('#demo');
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1, // seconds
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney left: '150px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney top: '100px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney }, function() {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney<h2>Complete Example Source</h2>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney{{>transition-basic-source}}