diff --git a/src/transition/docs/assets/transition.css b/src/transition/docs/assets/transition.css new file mode 100644 index 00000000000..8efacb667cb --- /dev/null +++ b/src/transition/docs/assets/transition.css @@ -0,0 +1,32 @@ +#example-canvas { /* for YDN */ + height: 250px; + +} +#demo { + background: #ccc; + border: 4px solid #999; + height: 200px; + margin: 20px; + overflow: hidden; + position: relative; + width: 300px; + zoom: 1; +} + +#demo a { + background: #999; + border: 2px solid #fff; + font-weight: bold; + color: #fff; + line-height: 12px; + height: 14px; + width: 15px; + overflow: hidden; + padding: 3px; + position: absolute; + top: 1px; + right: 1px; + text-decoration: none; + text-align: center; +} + diff --git a/src/transition/docs/component.json b/src/transition/docs/component.json new file mode 100644 index 00000000000..42761ddf05f --- /dev/null +++ b/src/transition/docs/component.json @@ -0,0 +1,41 @@ +{ + "name" : "transition", + "displayName": "Transition", + "description": "Transition adds the ability to animate Node style properties. It is modeled after the CSS Transition specification, and leverages native CSS Transition implementations when possible.", + "author" : "msweeney", + + "tags": ["utility", "transition"], + "use" : ["transition"], + + "examples": [ + { + "name" : "transition-basic", + "displayName": "Basic Node Transitions", + "description": "Demonstrates the basic usage of Transitions.", + "modules" : ["transition"], + "tags" : ["transition"], + + "hideTableOfContents": true + }, + + { + "name" : "transition-usage", + "displayName": "Using Transitions", + "description": "Demonstrates more advanced usage of Transitions.", + "modules" : ["transition"], + "tags" : ["transition"], + + "hideTableOfContents": true + }, + + { + "name" : "transition-view", + "displayName": "Showing and Hiding with Transitions", + "description": "Demonstrates how to animate Node's show and hide methods.", + "modules" : ["transition", "node-event-delegate"], + "tags" : ["transition"], + + "hideTableOfContents": true + } + ] +} diff --git a/src/transition/docs/index.mustache b/src/transition/docs/index.mustache new file mode 100644 index 00000000000..0245e1c7bf4 --- /dev/null +++ b/src/transition/docs/index.mustache @@ -0,0 +1,125 @@ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EasingDescription
cubic-bezierSpecifies 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)
linearequivalent to cubic-bezier(0, 0, 1, 1)
ease-inequivalent to cubic-bezier(0.42, 0, 1, 1)
ease-outequivalent to cubic-bezier(0, 0, 0.58, 1)
ease-in-outequivalent 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'); +}); + +``` diff --git a/src/transition/docs/partials/transition-basic-source.mustache b/src/transition/docs/partials/transition-basic-source.mustache new file mode 100644 index 00000000000..08d9889c638 --- /dev/null +++ b/src/transition/docs/partials/transition-basic-source.mustache @@ -0,0 +1,25 @@ +

+ x +
+ + diff --git a/src/transition/docs/partials/transition-usage-source.mustache b/src/transition/docs/partials/transition-usage-source.mustache new file mode 100644 index 00000000000..25122a8754d --- /dev/null +++ b/src/transition/docs/partials/transition-usage-source.mustache @@ -0,0 +1,45 @@ +
+ x +
+ + + + diff --git a/src/transition/docs/partials/transition-view-source.mustache b/src/transition/docs/partials/transition-view-source.mustache new file mode 100644 index 00000000000..cbdb0efd7ed --- /dev/null +++ b/src/transition/docs/partials/transition-view-source.mustache @@ -0,0 +1,20 @@ + + + +

lorem ipsum dolor sit

+ + diff --git a/src/transition/docs/transition-basic.mustache b/src/transition/docs/transition-basic.mustache new file mode 100644 index 00000000000..e9a2c227243 --- /dev/null +++ b/src/transition/docs/transition-basic.mustache @@ -0,0 +1,49 @@ + +
+

the transition method animates the value of each property from the current value to the given value. + Click the X to run the animation.

+
+ +
+{{>transition-basic-source}} +
+ +

Using the Transition Method

+

Transition allows you to animate one or more properties from their current value to a given value with the specified duration and easing method.

+ +``` + Y.one('#demo').transition({ + duration: 1, // seconds + easing: 'ease-out', + height: 0, + width: 0, + left: '150px', + top: '100px', + opacity: 0 + }); +}); +``` + +

Transition with Callback

+

The transition method provides an optional callback argument, which is a function that runs once the transition is completed. The callback runs only for this transition.

+ +``` + var node = Y.one('#demo'); + + node.transition({ + duration: 1, // seconds + easing: 'ease-out', + height: 0, + width: 0, + left: '150px', + top: '100px', + opacity: 0 + }, function() { + this.remove(); + }); +``` + +

Complete Example Source

+``` +{{>transition-basic-source}} +``` diff --git a/src/transition/docs/transition-usage.mustache b/src/transition/docs/transition-usage.mustache new file mode 100644 index 00000000000..2389d4abe7f --- /dev/null +++ b/src/transition/docs/transition-usage.mustache @@ -0,0 +1,49 @@ + +
+

CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects. +Click the X to run the animation.

+
+ +
+{{>transition-usage-source}} +
+ +

Separate Transition Properties

+

Each transition property can optionally have its own duration, delay, and/or easing.

+

An optional callback can be passed as the second argument to transition(). The callback is run after all property transitions have completed. In this case, we will use it to remove the node from the document.

+ +``` +Y.one('#demo').transition({ + duration: 1, // seconds + easing: 'ease-out', // CSS syntax + height: 0, + top: '100px', + + width: { + delay: 1, + duration: 0.5, + easing: 'ease-in', + value: 0 + }, + + left: { + delay: 1, + duration: 0.5, + easing: 'ease-in', + value: '150px' + }, + + opacity: { + delay: 1.5, + duration: 0.25, + value: 0 + } +}, function() { + this.remove(); +}); +``` + +

Complete Example Source

+``` +{{>transition-usage-source}} +``` diff --git a/src/transition/docs/transition-view.mustache b/src/transition/docs/transition-view.mustache new file mode 100644 index 00000000000..31db1141f4b --- /dev/null +++ b/src/transition/docs/transition-view.mustache @@ -0,0 +1,39 @@ + +
+

This example shows how to show and hide Node instances.

+
+ +
+{{>transition-view-source}} +
+ +

Showing a Node

+

The view of a Node instance can be transitioned by passing true to the show and hide methods.

+ +``` + Y.one('.demo').show(true); +``` + +

Hiding a Node

+

The opposite of show, the hide method sets the node's CSS display property to none.

+ +``` + Y.one('.demo').hide(true); +``` + +

Complete Example Source

+``` +{{>transition-view-source}} +```