Adds first demo examples of transition, adds self running code samples

build/minified/modules/transition.js

@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {

build/packaged/modules/transition.js

@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {

build/uncompressed/modules/transition.js

@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          }
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {

node/src/documents/modules/transition.html

@@ -30,23 +30,42 @@ type   : 'UI Module'
   
   <h2 class="ui dividing header">Introduction</h2>
 
-  <p>Transitions allows for use of CSS transitions with similar syntax to jQuery's 
-    <a href="http://api.jquery.com/animate/">animate</a>
-  </p>
+  <p>UI Transitions provide a wrapper for using css transitions in javascript without having to manually manage class names and state.</p>
   <h2 class="ui dividing header">Usage</h2>
-  
-  <h3 class="ui header">Initializing a transition</h3>
-  <div class="code">
-    $('.test.button')
+
+  <h3 class="ui header">Using transition</h3>
+  <p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>.</p>
+
+  <div class="code" data-demo="true" data-title="Arguments in transition">
+    $('.dog.image')
+      // default everything
+      .transition()
+      // ok ill specify an animation
+      .transition('fade in')
+      // no that was way too quick
+      .transition('fade out', '2s')
+      .transition('fade in', function() {
+        window.alert('Aha you sat through them all!');
+      })
+    ;
+  </div>
+
+  <p>A transition can be called multiple times to create an animation queue.</p>
+  <div class="code" data-demo="true" data-title="Queueing animations">
+    $('.dog.image')
       .transition('flip out y', '500ms')
       .transition('flip in y', '500ms', function() {
         console.log('done!');
       })
     ;
   </div>
-  <div class="ui large teal test button">
-    Hello
-  </div>
+  <img src="/images/demo/vector.png" class="ui medium dog image">
+
+  <h2 class="ui dividing header">Variations</h2>
+
+
+
+  <h2 class="ui dividing header">Behavior</h2>
 
 </div>
 </body>

node/src/files/components/semantic/modules/transition.js

@@ -263,6 +263,7 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
           module.set.animating();
           $module
@@ -285,7 +286,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +470,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {

node/src/files/javascript/semantic.js

@@ -166,10 +166,10 @@ semantic.ready = function() {
     initializeCode: function() {
       var
         $code       = $(this),
-        $label      = $('<div>').addClass('ui label'),
         code        = $code.html(),
         contentType = $code.data('type')  || 'javascript',
         title       = $code.data('title') || false,
+        demo        = $code.data('demo')  || false,
         label       = $code.data('label') || false,
         displayType = {
           html       : 'HTML',
@@ -179,6 +179,7 @@ semantic.ready = function() {
           sh         : 'Command Line'
         },
         whiteSpace  = new RegExp('\\n\\s{4}', 'g'),
+        $label,
         padding     = 4,
         label,
         editor,
@@ -218,19 +219,29 @@ semantic.ready = function() {
       ;
       // add label
       if(title) {
-        $label
-          .addClass('attached top')
+        $('<div>')
+          .addClass('ui attached top label')
           .html('<span class="title">' + title + '</span>' + '<em>' + (displayType[contentType] || contentType) + '</em>')
           .prependTo( $(this).parent() )
         ;
       }
-      else if(label) {
-        $label
-          .addClass('pointing below')
+      if(label) {
+        $('<div>')
+          .addClass('ui pointing below label')
           .html(displayType[contentType] || contentType)
           .insertBefore ( $(this).parent() )
         ;
       }
+      if(demo) {
+        $('<a>')
+          .addClass('ui pointing below black label')
+          .html('Run Code')
+          .on('click', function() {
+            eval(code);
+          })
+          .insertBefore ( $(this).parent() )
+        ;
+      }
       editor.resize();
     },
 

src/modules/transition.js

@@ -106,6 +106,13 @@ $.fn.transition = function() {
             $module.addClass(className.animating);
           },
 
+          direction: function() {
+            return $module.is(':visible') 
+              ? 'out'
+              : 'in'
+            ;
+          },
+
           loop: function() {
             $module
               .addClass(className.loop)
@@ -263,7 +270,9 @@ $.fn.transition = function() {
           module.set.duration();
           module.show();
           module.originalClass = $module.attr('class');
+          module.originalStyle = $module.attr('style');
           module.repaint();
+          module.set.direction();
           module.set.animating();
           $module
             .addClass(className.transition)
@@ -285,7 +294,7 @@ $.fn.transition = function() {
         reset: function() {
           module.verbose('Resetting original class', module.originalClass);
           $module
-            .removeAttr('style')
+            .attr('style', module.originalStyle)
             .attr('class', module.originalClass)
           ;
         },
@@ -469,7 +478,7 @@ $.fn.transition.settings = {
   complete     : function() {},
   
   // animation duration (useful only with future js animations)
-  animation    : 'fade in',
+  animation    : 'fade',
   duration     : '1s',
   
   className    : {