The Transition Utility provides an API for creating advanced transitions between style property values. Native CSS Transitions are used when possible.
+Getting Started
+ ++To include the source files for Transition and its dependencies, first load +the YUI seed file if you haven't already loaded it. +
+ +<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>+ + +
+Next, create a new YUI instance for your application and populate it with the
+modules you need by specifying them as arguments to the YUI().use() method.
+YUI will automatically load any dependencies required by the modules you
+specify.
+
<script>
+// Create a new YUI instance and populate it with the required modules.
+YUI().use('transition', function (Y) {
+ // Transition is available and ready for use. Add implementation
+ // code here.
+});
+</script>
+
+
+
+For more information on creating YUI instances and on the
+use() method, see the
+documentation for the YUI Global Object.
+
Using Transitions
+Transition Method
+The Transition Utility adds the transition method to Node instances when the transition module is included. The method accepts a configuration object, and an optional callback function. The config may include one or more CSS properties to be transitioned, an optional duration (in seconds), delay, and easing for fine-tuning transition behavior. Calling the transition method begins the transition. The callback is run after the transition has completed.
Y.one('#demo').transition({
+ easing: 'ease-out',
+ duration: 0.75, // seconds
+ width: '10px',
+ height: '10px'
+}, function() {
+ this.remove();
+});
+
+
+ Supported Easings
+ +Transition supports the following easings:
+| Easing | +Description | +
|---|---|
cubic-bezier |
+ 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. | +
ease (default) |
+ equivalent to cubic-bezier(0.25, 0.1, 0.25, 1) | +
linear |
+ equivalent to cubic-bezier(0, 0, 1, 1) | +
ease-in |
+ equivalent to cubic-bezier(0.42, 0, 1, 1) | +
ease-out |
+ equivalent to cubic-bezier(0, 0, 0.58, 1) | +
ease-in-out |
+ equivalent to cubic-bezier(0.42, 0, 0.58, 1) | +
Transition easings are defined as part of the CSS3 Transition Module. See the full specification for further details. + +
Property Specific Attributes
+ +The Transition Utility also allows for property specific attributes. Each attribute may optionally have its own duration, easing, and/or delay. This provides much finer control over the transition timeline, enabling more complex effects.
Y.one('#demo').transition({
+ 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
+ }
+});
+
+
+
+ Listening for Events
+The Transition Utility provides optional notifications for reacting to the start and end of a transition. These can be subscribed to via the on attribute of the transition config.
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');
+ }
+ }
+});
+
+
+ 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');
+});
+
+