From 442e8b2f05a35ed9d8cc5fc6e9afeeabf9e3972c Mon Sep 17 00:00:00 2001
From: Jack Lukic <jack@quirky.com>
Date: Tue, 6 Aug 2013 01:17:29 -0400
Subject: [PATCH] adds more examples

---
 node/src/documents/modules/transition.html | 48 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/node/src/documents/modules/transition.html b/node/src/documents/modules/transition.html
index 3bc211987..04901f41b 100755
--- a/node/src/documents/modules/transition.html
+++ b/node/src/documents/modules/transition.html
@@ -107,36 +107,70 @@ type   : 'UI Module'
       <div class="example">
         <h4 class="ui header">Flash</h4>
         <p>An element can flash to draw attention to itself</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('flash')
+    ;
+        </div>
       </div>
       <div class="example">
         <h4 class="ui header">Shake</h4>
         <p>An element can shake to draw attention to its position</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('shake')
+    ;
+        </div>
       </div>
       <div class="example">
         <h4 class="ui header">Tada</h4>
         <p>An element can give user positive feedback for an action</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('tada')
+    ;
+        </div>
       </div>
       <div class="example">
         <h4 class="ui header">Bounce</h4>
         <p>An element can bounce to politely remind you of itself</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('bounce')
+    ;
+        </div>
       </div>
 
       <h3>Appearance</h3>
       <div class="example">
-        <h4 class="ui header">Horizontal Flip</h4>
-        <p>An element can flip in horizontally into or out of view</p>
-      </div>
-      <div class="example">
-        <h4 class="ui header">Vertical Flip</h4>
-        <p>An element can flip vertically into or out of view</p>
+        <h4 class="ui header">Flip</h4>
+        <p>An element can flip into or out of view vertically or horizontally</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('horizontal flip')
+      .transition('vertical flip')
+    ;
+        </div>
       </div>
       <div class="example">
         <h4 class="ui header">Fade</h4>
-        <p>An element can fade into or out of view</p>
+        <p>An element can fade into or out of view descending and ascending</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('fade')
+      .transition('fade up')
+      .transition('fade down')
+    ;
+        </div>
       </div>
       <div class="example">
         <h4 class="ui header">Scale</h4>
         <p>An element can scale into or out of view</p>
+        <div class="code" data-demo="true">
+    $('.dog.image')
+      .transition('scale')
+    ;
+        </div>
       </div>
 
       <h2 class="ui dividing header">Behavior</h2>