Bug fixes for transition

RELEASE-NOTES.md

@@ -7,12 +7,15 @@
 - **Visibiliity** - Attach callbacks to elements visibility conditions like `top visible` `bottom visible`, `passing`. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics
 
 **Enhancements**
+- **Transition** - Added more reasonable default durations for each animation
 - **Loader** - `inline loader` now has a `centered` variation
 - **Transition** - Added `toggle` behavior and docs for `show` and `hide`
 - **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`)
 
 **Bugs**
+- **Transition** - Fixes `swing out` animations not working correctly
 - **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation
+- **Transition** - Fix bug in `remove looping` causing one additional animation
 - **Menu** - Fix vertical pointing menu, sub menu arrow color
 - **Item ** - `img` inside of `ui item content` now do not receive size formatting by default
 - **Form** - Added `input[type="search"]` styles to `ui form`

src/definitions/modules/transition.js

@@ -465,6 +465,7 @@ $.fn.transition = function() {
             $module
               .removeClass(className.looping)
             ;
+            module.reset();
             module.forceRepaint();
           },
           transition: function() {

src/themes/default/modules/transition.overrides

@@ -14,6 +14,9 @@
      Browse
 ---------------*/
 
+.transition.browse {
+  animation-duration: 500ms;
+}
 .transition.browse.in {
   animation-name: browseIn;
 }
@@ -92,7 +95,7 @@
 
 .drop.transition {
   transform-origin: top center;
-  animation-duration: 0.5s;
+  animation-duration: 500ms;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
@@ -266,6 +269,7 @@
 
 .flip.transition.in,
 .flip.transition.out {
+  animation-duration: 750ms;
   perspective: 2000px;
 }
 .horizontal.flip.transition.in {
@@ -653,39 +657,42 @@
      Swing
 ---------------*/
 
-.transition.swing.in,
+.transition.swing {
+  animation-duration: 800ms;
+}
+
 .transition[class*="swing down"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].in {
-  animation-name: swingInY;
+  animation-name: swingInX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].in {
-  animation-name: swingInX;
+  animation-name: swingInY;
   transform-origin: center left;
 }
 
 .transition.swing.out,
 .transition[class*="swing down"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: top center;
 }
 .transition[class*="swing up"].out {
-  animation-name: swingOutY;
+  animation-name: swingOutX;
   transform-origin: bottom center;
 }
 .transition[class*="swing left"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center right;
 }
 .transition[class*="swing right"].out {
-  animation-name: swingOutX;
+  animation-name: swingOutY;
   transform-origin: center left;
 }
 
@@ -696,14 +703,14 @@
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateX(-20deg);
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateX(10deg);
+    transform: perspective(1000px) rotateX(15deg);
   }
   80% {
-    transform: perspective(1000px) rotateX(-5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateX(0deg);
@@ -715,14 +722,14 @@
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateY(20deg);
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
   60% {
-    transform: perspective(1000px) rotateY(-10deg);
+    transform: perspective(1000px) rotateY(-17.5deg);
   }
   80% {
-    transform: perspective(1000px) rotateY(5deg);
-    opacity: 1;
+    transform: perspective(1000px) rotateY(7.5deg);
   }
   100% {
     transform: perspective(1000px) rotateY(0deg);
@@ -730,59 +737,46 @@
 }
 
 /* Out */
-@keyframes swingOutUp {
+@keyframes swingOutX {
   0% {
     transform: perspective(1000px) rotateX(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateX(-20deg);
-    opacity:1;
-  }
-  100% {
-    transform: perspective(1000px) rotateX(90deg);
-    opacity: 0;
+  40% {
+    transform: perspective(1000px) rotateX(-7.5deg);
   }
-}
-@keyframes swingOutDown {
-  0% {
-    transform: perspective(1000px) rotateX(0deg);
+  60% {
+    transform: perspective(1000px) rotateX(17.5deg);
   }
-  30% {
-    transform: perspective(1000px) rotateX(20deg);
-    opacity:1;
+  80% {
+    transform: perspective(1000px) rotateX(-30deg);
+    opacity: 1;
   }
   100% {
-    transform: perspective(1000px) rotateX(-90deg);
+    transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
 }
-@keyframes swingOutLeft {
+@keyframes swingOutY {
   0% {
     transform: perspective(1000px) rotateY(0deg);
   }
-  30% {
-    transform: perspective(1000px) rotateY(20deg);
-    opacity:1;
-  }
-  100% {
-    transform: perspective(1000px) rotateY(-90deg);
-    opacity: 0;
+  40% {
+    transform: perspective(1000px) rotateY(7.5deg);
   }
-}
-@keyframes swingOutRight {
-  0% {
-    transform: perspective(1000px) rotateY(0deg);
+  60% {
+    transform: perspective(1000px) rotateY(-10deg);
   }
-  30% {
-    transform: perspective(1000px) rotateY(-20deg);
-    opacity:1;
+  80% {
+    transform: perspective(1000px) rotateY(30deg);
+    opacity: 1;
   }
   100% {
-    transform: perspective(1000px) rotateY(90deg);
+    transform: perspective(1000px) rotateY(-90deg);
     opacity: 0;
   }
 }
 
+
 /*******************************
        Static Animations
 *******************************/
@@ -792,21 +786,27 @@
 ---------------*/
 
 .flash.transition {
+  animation-duration: 750ms;
   animation-name: flash;
 }
 .shake.transition {
+  animation-duration: 750ms;
   animation-name: shake;
 }
 .bounce.transition {
+  animation-duration: 750ms;
   animation-name: bounce;
 }
 .tada.transition {
+  animation-duration: 750ms;
   animation-name: tada;
 }
 .pulse.transition {
+  animation-duration: 500ms;
   animation-name: pulse;
 }
 .jiggle.transition {
+  animation-duration: 750ms;
   animation-name: jiggle;
 }