39b487c84024183d7039e8ec980f3af093b8dffeMatt Sweeney <div class="intro">
39b487c84024183d7039e8ec980f3af093b8dffeMatt Sweeney <p>The Transition Utility provides an API for creating advanced transitions between style property values. Native CSS Transitions are used when possible.</p>
39b487c84024183d7039e8ec980f3af093b8dffeMatt Sweeney{{>getting-started}}
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <h2 id="using">Using Transitions</h2>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <h3 id="attributes">Transition Method</h3>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>The Transition Utility adds the <code>transition</code> method to <code>Node</code> instances when the <code>transition</code> module is included. The method accepts a configuration object, and an optional callback function. The config may include one or more <code>CSS</code> properties to be transitioned, an optional <code>duration</code> (in seconds), <code>delay</code>, and <code>easing</code> for fine-tuning transition behavior. Calling the <code>transition</code> method begins the transition. The <code>callback</code> is run after the transition has completed.</p>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyY.one('#demo').transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out',
58c34b3859d2074cf1ee64d0340627723e025872Matt Sweeney duration: 0.75, // seconds
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney width: '10px',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney height: '10px'
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney}, function() {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <h3 id="easings">Supported Easings</h3>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>Transition supports the following easings:</p>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <th>Easing</th>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <th>Description</th>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>cubic-bezier</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>Specifies a cubic-bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>ease (default)</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>linear</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>equivalent to cubic-bezier(0, 0, 1, 1)</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>ease-in</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>equivalent to cubic-bezier(0.42, 0, 1, 1)</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>ease-out</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>equivalent to cubic-bezier(0, 0, 0.58, 1)</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td><code>ease-in-out</code></td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <td>equivalent to cubic-bezier(0.42, 0, 0.58, 1)</td>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>Transition easings are defined as part of the CSS3 Transition Module. See the <a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag">full specification</a> for further details.
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <h3 id="attr-specific">Property Specific Attributes</h3>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>The Transition Utility also allows for property specific attributes. Each attribute may optionally have its own <code>duration</code>, </code>easing</code>, and/or <code>delay</code>. This provides much finer control over the transition timeline, enabling more complex effects.</p>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyY.one('#demo').transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.75,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-out',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney delay: 0.75,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney easing: 'ease-in',
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1.25,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <h3 id="transition-events">Listening for Events</h3>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>The Transition Utility provides optional notifications for reacting to the start and end of a transition. These can be subscribed to via the <code>on</code> attribute of the transition config.</p>
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeneyvar node = Y.one('#demo');
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyY.one('#demo').transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.5,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney start: function() {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney end: function() {
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney <p>For simplicity, an end handler can also be added as a function callback:
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt SweeneyY.one('#demo').transition({
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 1,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney duration: 0.5,
69d0a7351a7624ee341dbfd2ab1e6b38c01d8333Matt Sweeney}, function() {