Add new transition settings for grouped animations

RELEASE-NOTES.md

@@ -2,6 +2,9 @@
 
 ### Version 1.10.0 - February 23, 2015
 
+**New Features**
+- **Transition** - Transitions now have `interval` to allow grouped elements to animate one by one with a delay between each animation. Grouped animations determine order based on transition direction to avoid reflows, or can manually be reversed by using <code>reverse: true</code> [See Examples](http://laptop-vm:9778/modules/transition.html#grouped-transitions) for more details.
+
 **Critical Fixes**
 - **Transition** - Webkit `failSafe` used for [Chromium Bug #437860](https://code.google.com/p/chromium/issues/detail?id=437860) now also works for queued animations
 
@@ -10,6 +13,7 @@
 - **Form Validation** - `contains` rule is now case insensitive
 - **Form Validation** - Validation messages no longer increase field height on `inline fields` like checkboxes after error appears
 - **API** - Added `was cancelled` to determine whether request was cancelled by `beforeSend`
+- **Image* - Added `hidden image` state
 
 **Fixes**
 - **Build Tools** - Fixed issue with recursive merge for site themes in update scripts, [details here](https://github.com/Semantic-Org/Semantic-UI/pull/1845) Thanks @derekslife

src/definitions/elements/image.less

@@ -47,7 +47,13 @@ img.ui.image {
             States
 *******************************/
 
+.ui.hidden.images,
+.ui.hidden.image {
+  display: none;
+}
+
 
+.ui.disabled.images,
 .ui.disabled.image {
   cursor: default;
   opacity: @disabledOpacity;
@@ -269,6 +275,7 @@ img.ui.bordered.image {
   font-size: @massive;
 }
 
+
 /*******************************
               Groups
 *******************************/

src/definitions/modules/transition.js

@@ -87,7 +87,7 @@ $.fn.transition = function() {
           if(methodInvoked === false) {
             module.verbose('Converted arguments into settings object', settings);
             if(settings.interval) {
-              setTimeout(module.animate, settings.interval * index);
+              module.delay(settings.animate);
             }
             else  {
               module.animate();
@@ -137,6 +137,24 @@ $.fn.transition = function() {
           ;
         },
 
+        delay: function(interval) {
+          var
+            isReverse = (settings.reverse === true),
+            shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
+            delay
+          ;
+          interval = (typeof interval !== undefined)
+            ? interval
+            : settings.interval
+          ;
+          delay = (isReverse || shouldReverse)
+            ? ($allModules.length - index) * settings.interval
+            : index * settings.interval
+          ;
+          module.debug('Delaying animation by', delay);
+          setTimeout(module.animate, delay);
+        },
+
         animate: function(overrideSettings) {
           settings = overrideSettings || settings;
           if(!module.is.supported()) {
@@ -324,12 +342,12 @@ $.fn.transition = function() {
                 .addClass(className.transition)
                 .addClass(className.hidden)
               ;
-              if($module.css('display') !== 'none') {
-                module.verbose('Overriding default display to hide element');
-                $module
-                  .css('display', 'none')
-                ;
-              }
+            }
+            if($module.css('display') !== 'none') {
+              module.verbose('Overriding default display to hide element');
+              $module
+                .css('display', 'none')
+              ;
             }
           },
           visible: function() {
@@ -351,7 +369,7 @@ $.fn.transition = function() {
           conditions: function() {
             var
               clasName = $module.attr('class') || false,
-              style = $module.attr('style') || ''
+              style    = $module.attr('style') || ''
             ;
             $module.removeClass(settings.animation);
             module.remove.direction();
@@ -376,6 +394,7 @@ $.fn.transition = function() {
             }
             if(module.cache.style) {
               module.verbose('Restoring original style attribute', module.cache.style);
+              console.log('restoring cache', module.cache.style);
               $module.attr('style', module.cache.style);
             }
             if(module.is.looping()) {
@@ -492,6 +511,31 @@ $.fn.transition = function() {
             }
             return $.fn.transition.settings;
           },
+          direction: function(animation) {
+            // quickest manually specified direction
+            animation = animation || settings.animation;
+            if(typeof animation === 'string') {
+              animation = animation.split(' ');
+              $.each(animation, function(index, word){
+                if(word === className.inward) {
+                  return className.inward;
+                }
+                else if(word === className.outward) {
+                  return className.outward;
+                }
+              });
+            }
+            // slower backup
+            if( !module.can.transition() ) {
+              return 'static';
+            }
+            if($module.is(':visible') && !module.is.hidden()) {
+              return className.outward;
+            }
+            else {
+              return className.inward;
+            }
+          },
           duration: function(duration) {
             duration = duration || settings.duration;
             if(duration === false) {
@@ -900,7 +944,10 @@ $.fn.transition.settings = {
   // delay between animations in group
   interval      : 0,
 
-  // animation complete event
+  // whether group animations should be reversed
+  reverse       : 'auto',
+
+  // animation callback event
   onStart       : function() {},
   onComplete    : function() {},
   onShow        : function() {},