port transition examples to mustache

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;
+}
+

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
+        }
+    ]
+}

src/transition/docs/index.mustache

@@ -0,0 +1,125 @@
+				<h2 id="using">Using Transitions</h2>
+				<h3 id="attributes">Transition Method</h3>
+                    <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>
+
+```
+Y.one('#demo').transition({
+    easing: 'ease-out',
+    duration: 0.75 // seconds,
+    width: '10px',
+    height: '10px'
+}, function() {
+    this.remove();
+});
+```
+
+				<h3 id="easings">Supported Easings</h3>
+
+                <p>Transition supports the following easings:</p>
+                <table>
+                <thead>
+                    <tr>
+                        <th>Easing</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>cubic-bezier</code></td>
+                        <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>
+                    </tr>
+                    <tr>
+                        <td><code>ease (default)</code></td>
+                        <td>equivalent to cubic-bezier(0.25, 0.1, 0.25, 1)</td>
+                    </tr>
+                    <tr>
+                        <td><code>linear</code></td>
+                        <td>equivalent to cubic-bezier(0, 0, 1, 1)</td>
+                    </tr>
+                    <tr>
+                        <td><code>ease-in</code></td>
+                        <td>equivalent to cubic-bezier(0.42, 0, 1, 1)</td>
+                    </tr>
+                    <tr>
+                        <td><code>ease-out</code></td>
+                        <td>equivalent to cubic-bezier(0, 0, 0.58, 1)</td>
+                    </tr>
+                    <tr>
+                        <td><code>ease-in-out</code></td>
+                        <td>equivalent to cubic-bezier(0.42, 0, 0.58, 1)</td>
+                    </tr>
+                </tbody>
+                </table>
+                <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.
+
+				<h3 id="attr-specific">Property Specific Attributes</h3>
+
+                    <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>
+
+```
+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
+    }
+});
+```
+
+
+        <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');
+});
+
+```

src/transition/docs/partials/transition-basic-source.mustache

@@ -0,0 +1,25 @@
+<div id="demo">
+    <a href="#">x</a>
+</div>
+
+<script type="text/javascript">
+YUI().use('transition', function(Y) {
+    var node = Y.one('#demo');
+
+    node.one('a').on('click', function(e) {
+        e.preventDefault();
+        
+        node.transition({
+            duration: 1, // seconds
+            easing: 'ease-out',
+            height: 0,
+            width: 0,
+            left: '150px',
+            top: '100px',
+            opacity: 0
+        }, function() {
+            this.remove(); 
+        });
+    });
+});
+</script>

src/transition/docs/partials/transition-usage-source.mustache

@@ -0,0 +1,45 @@
+<div id="demo">
+    <a href="#">x</a>
+</div>
+
+<script type="text/javascript">
+YUI().use('transition', function(Y) {
+    var node = Y.one('#demo');
+
+    node.one('a').on('click', function(e) {
+        e.preventDefault();
+        
+        node.transition({
+            duration: 1, // seconds
+            easing: 'ease-out', // CSS syntax
+            height: 0,
+            top: '100px',
+
+            width: {
+                delay: 1,
+                duration: 0.75,
+                easing: 'ease-in',
+                value: 0
+            },
+
+            left: {
+                delay: 1,
+                duration: 0.75,
+                easing: 'ease-in',
+                value: '150px'
+            },
+
+            opacity: {
+                delay: 1.5,
+                duration: 0.75,
+                value: 0
+            }
+        }, function() {
+            node.remove(); 
+        });
+    });
+});
+
+</script>
+</body>
+</html>

src/transition/docs/partials/transition-view-source.mustache

@@ -0,0 +1,20 @@
+<button id="show">show</button>
+<button id="hide">hide</button>
+
+<div class="demo"><p>lorem ipsum dolor sit</p></div>
+
+<script type="text/javascript">
+YUI().use('transition', 'node-event-delegate', function(Y) {
+    Y.delegate('click', function(e) {
+        var buttonID = e.currentTarget.get('id'),
+            node = Y.one('.demo');
+            
+        if (buttonID === 'show') {
+            node.show(true);
+        } else if (buttonID == 'hide') {
+            node.hide(true);
+        }
+
+    }, document, 'button');
+});
+</script>

src/transition/docs/transition-basic.mustache

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

src/transition/docs/transition-usage.mustache

@@ -0,0 +1,49 @@
+<link href="{{componentAssets}}/transition.css" rel="stylesheet" type="text/css">
+<div class="intro">
+    <p>CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects.
+Click the X to run the animation.</p>
+</div>
+
+<div class="example" style="height:240px;">
+{{>transition-usage-source}}
+</div>
+
+<h2>Separate Transition Properties</h2>
+<p>Each transition property can optionally have its own duration, delay, and/or easing.</p>
+<p>An optional callback can be passed as the second argument to <code>transition()</code>.  The callback is run after all property transitions have completed.  In this case, we will use it to remove the node from the document.</p>
+
+```
+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();
+});
+```
+
+<h2>Complete Example Source</h2>
+```
+{{>transition-usage-source}}
+```