index.mustache revision 39b487c84024183d7039e8ec980f3af093b8dffe
44N/A <div class="intro">
44N/A <p>The Transition Utility provides an API for creating advanced transitions between style property values. Native CSS Transitions are used when possible.</p>
44N/A</div>
44N/A
44N/A{{>getting-started}}
44N/A
44N/A <h2 id="using">Using Transitions</h2>
44N/A <h3 id="attributes">Transition Method</h3>
44N/A <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>
44N/A
44N/A```
44N/AY.one('#demo').transition({
44N/A easing: 'ease-out',
44N/A duration: 0.75, // seconds
44N/A width: '10px',
44N/A height: '10px'
44N/A}, function() {
44N/A this.remove();
44N/A});
44N/A```
75N/A
75N/A <h3 id="easings">Supported Easings</h3>
5636N/A
44N/A <p>Transition supports the following easings:</p>
5680N/A <table>
44N/A <thead>
44N/A <tr>
44N/A <th>Easing</th>
491N/A <th>Description</th>
844N/A </tr>
844N/A </thead>
44N/A <tbody>
2899N/A <tr>
2899N/A <td><code>cubic-bezier</code></td>
5680N/A <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>
44N/A </tr>
515N/A <tr>
515N/A <td><code>ease (default)</code></td>
515N/A <td>equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)</td>
44N/A </tr>
44N/A <tr>
5680N/A <td><code>linear</code></td>
58N/A <td>equivalent to cubic-bezier(0, 0, 1, 1)</td>
44N/A </tr>
44N/A <tr>
44N/A <td><code>ease-in</code></td>
44N/A <td>equivalent to cubic-bezier(0.42, 0, 1, 1)</td>
59N/A </tr>
44N/A <tr>
44N/A <td><code>ease-out</code></td>
59N/A <td>equivalent to cubic-bezier(0, 0, 0.58, 1)</td>
59N/A </tr>
59N/A <tr>
177N/A <td><code>ease-in-out</code></td>
59N/A <td>equivalent to cubic-bezier(0.42, 0, 0.58, 1)</td>
59N/A </tr>
44N/A </tbody>
5795N/A </table>
5795N/A <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.
5795N/A
5795N/A <h3 id="attr-specific">Property Specific Attributes</h3>
5795N/A
3817N/A <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>
3817N/A
5795N/A```
3817N/AY.one('#demo').transition({
3817N/A duration: 0.75,
easing: 'ease-out',
height: 0,
width: {
delay: 0.75,
easing: 'ease-in',
value: 0
},
opacity: {
delay: 1.5,
duration: 1.25,
value: 0
}
});
```
<h3 id="transition-events">Listening for Events</h3>
<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>
```
var node = Y.one('#demo');
Y.one('#demo').transition({
duration: 1,
height:0,
width: {
delay: 1,
duration: 0.5,
value: 0
},
on: {
start: function() {
Y.log('start');
},
end: function() {
Y.log('end');
}
}
});
```
<p>For simplicity, an end handler can also be added as a function callback:
```
Y.one('#demo').transition({
duration: 1,
height:0,
width: {
delay: 1,
duration: 0.5,
value: 0
}
}, function() {
Y.log('end');
});
```