From 018fb8503c3c868a4537fe158af35a07a937c5c1 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Wed, 21 Jan 2015 18:24:34 -0500
Subject: [PATCH] Fix animations to return to same direction, fix css for
 consistent formatting

---
 RELEASE-NOTES.md                              |   2 +
 src/definitions/modules/transition.less       |   5 -
 .../default/modules/transition.overrides      | 144 +++++++++++-------
 3 files changed, 90 insertions(+), 61 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 168ef0db2..fa8343652 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -3,6 +3,7 @@
 ### Version 1.8.0 - January 21, 2015
 
 **Enhancements**
+- **Transition** - Transition duration now defaults to what is specified in `css`, to set custom duration you can still pass at run-time as a different value
 - **Dropdown** - Keyboard navigation will now allow opening of sub menus with right/left arrow. Enter will open sub-menus on an unselectable category (`allowCategorySelection: false`) as well.
 - **Dropdown** - Mutation observers will now observe changed in `<select>` values after initialization, and will automatically update dropdown menu when changed
 - **API** - Added new behavior `$.api('abort')` which cancels current request
@@ -23,6 +24,7 @@
 - **API** - Fixed bug where `$.api('get xhr')` was not correctly returning xhr promise
 - *Sticky** - Fixes issue with container size not being set explicitly on rail due to improper method renaming
 - **Search** - Search results no longer hide/show when user changes tab or page loses focus
+- **Transition** - Fixed bug with animations that contain the strings 'in' or 'out' as part of their names, for example "swing"
 
 
 ### Version 1.7.(1-2) - January 15, 2015
diff --git a/src/definitions/modules/transition.less b/src/definitions/modules/transition.less
index 27349399d..6a7ef1e68 100755
--- a/src/definitions/modules/transition.less
+++ b/src/definitions/modules/transition.less
@@ -23,11 +23,6 @@
           Transitions
 *******************************/
 
-/*
-  Some transitions adapted from Animate CSS
-  https://github.com/daneden/animate.css
-*/
-
 .transition {
   animation-iteration-count: 1;
   animation-duration: @transitionDefaultDuration;
diff --git a/src/themes/default/modules/transition.overrides b/src/themes/default/modules/transition.overrides
index b23a48375..53114cb16 100644
--- a/src/themes/default/modules/transition.overrides
+++ b/src/themes/default/modules/transition.overrides
@@ -2,6 +2,14 @@
           Transitions
 *******************************/
 
+/*
+  Some transitions adapted from Animate CSS
+  https://github.com/daneden/animate.css
+
+  Additional transitions adapted from Glide
+  by Nick Pettit - https://github.com/nickpettit/glide
+*/
+
 /*--------------
      Browse
 ---------------*/
@@ -17,6 +25,7 @@
   animation-name: browseOutRight;
 }
 
+/* In */
 @keyframes browseIn {
   0% {
     transform: scale(0.8) translateZ(0px);
@@ -37,6 +46,8 @@
     z-index: 999;
   }
 }
+
+/* Out */
 @keyframes browseOutLeft {
   0% {
     z-index: 999;
@@ -76,12 +87,12 @@
 
 
 /*--------------
-      Drop
+     Drop
 ---------------*/
 
 .drop.transition {
   transform-origin: top center;
-  transition-duration: 0.8s;
+  animation-duration: 0.5s;
   animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
 }
 .drop.transition.in {
@@ -91,7 +102,7 @@
   animation-name: dropOut;
 }
 
-/* Scale */
+/* Drop */
 @keyframes dropIn {
   0% {
     opacity: 0;
@@ -149,6 +160,7 @@
   animation-name: fadeOutRight;
 }
 
+/* In */
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -198,6 +210,7 @@
   }
 }
 
+/* Out */
 @keyframes fadeOut {
   0% {
     opacity: 1;
@@ -268,47 +281,46 @@
   animation-name: verticalFlipOut;
 }
 
-/* Horizontal */
+/* In */
 @keyframes horizontalFlipIn {
   0% {
-    transform: rotateY(-90deg);
+    transform: perspective(2000px) rotateY(-90deg);
     opacity: 0;
   }
   100% {
-    transform: rotateY(0deg);
+    transform: perspective(2000px) rotateY(0deg);
     opacity: 1;
   }
 }
-/* Horizontal */
-@keyframes horizontalFlipOut {
+@keyframes verticalFlipIn {
   0% {
-    transform: rotateY(0deg);
-    opacity: 1;
+    transform: perspective(2000px) rotateX(-90deg);
+    opacity: 0;
   }
   100% {
-    transform: rotateY(90deg);
-    opacity: 0;
+    transform: perspective(2000px) rotateX(0deg);
+    opacity: 1;
   }
 }
 
-/* Vertical */
-@keyframes verticalFlipIn {
+/* Out */
+@keyframes horizontalFlipOut {
   0% {
-    transform: rotateX(-90deg);
-    opacity: 0;
+    transform: perspective(2000px) rotateY(0deg);
+    opacity: 1;
   }
   100% {
-    transform: rotateX(0deg);
-    opacity: 1;
+    transform: perspective(2000px) rotateY(90deg);
+    opacity: 0;
   }
 }
 @keyframes verticalFlipOut {
   0% {
-    transform: rotateX(0deg);
+    transform: perspective(2000px) rotateX(0deg);
     opacity: 1;
   }
   100% {
-    transform: rotateX(-90deg);
+    transform: perspective(2000px) rotateX(-90deg);
     opacity: 0;
   }
 }
@@ -324,7 +336,7 @@
   animation-name: scaleOut;
 }
 
-/* Scale */
+/* In */
 @keyframes scaleIn {
   0% {
     opacity: 0;
@@ -335,6 +347,8 @@
     transform: scale(1);
   }
 }
+
+/* Out */
 @keyframes scaleOut {
   0% {
     opacity: 1;
@@ -350,6 +364,10 @@
       Fly
 ---------------*/
 
+.transition.fly {
+  animation-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
 .transition.fly.in {
   animation-name: flyIn;
 }
@@ -381,10 +399,8 @@
   animation-name: flyOutLeft;
 }
 
+/* In */
 @keyframes flyIn {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
   0% {
     opacity: 0;
     transform: scale3d(.3, .3, .3);
@@ -408,9 +424,6 @@
   }
 }
 @keyframes flyInUp {
-  0%, 60%, 75%, 90%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
   0% {
     opacity: 0;
     transform: translate3d(0, 1500px, 0);
@@ -430,9 +443,6 @@
   }
 }
 @keyframes flyInDown {
-  0%, 60%, 75%, 90%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
   0% {
     opacity: 0;
     transform: translate3d(0, -1500px, 0);
@@ -452,9 +462,6 @@
   }
 }
 @keyframes flyInLeft {
-  0%, 60%, 75%, 90%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
   0% {
     opacity: 0;
     transform: translate3d(1500px, 0, 0);
@@ -474,9 +481,6 @@
   }
 }
 @keyframes flyInRight {
-  0%, 60%, 75%, 90%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
   0% {
     opacity: 0;
     transform: translate3d(-1500px, 0, 0);
@@ -496,6 +500,7 @@
   }
 }
 
+/* Out */
 @keyframes flyOut {
   20% {
     transform: scale3d(.9, .9, .9);
@@ -596,6 +601,7 @@
   transform-origin: center left;
 }
 
+/* In */
 @keyframes slideInY {
   0% {
     opacity: 0;
@@ -616,6 +622,8 @@
     transform: scaleX(1);
   }
 }
+
+/* Out */
 @keyframes slideOutY {
   0% {
     opacity: 1;
@@ -642,64 +650,61 @@
      Swing
 ---------------*/
 
-.transition.swing,
+.transition.swing {
+  perspective: 1000px;
+  animation-duration: 0.5s;
+  transition-timing-function: ease-in;
+}
 .transition.swing.in,
 .transition.swing.in.down {
   transform-origin: top center;
-  transition-timing-function: ease-in;
   animation-name: swingInX;
 }
 .transition.swing.in.up {
   transform-origin:bottom center;
-  transition-timing-function: ease-in;
   animation-name: swingInX;
 }
 .transition.swing.in.left {
   transform-origin: center right;
-  transition-timing-function: ease-in;
   animation-name: swingInY;
 }
 .transition.swing.in.right {
   transform-origin: center left;
-  transition-timing-function: ease-in;
   animation-name: swingInY;
 }
 
 .transition.swing.out.down,
 .transition.swing.out {
   transform-origin: top center;
-  transition-timing-function: ease-in;
-  animation-name: swingOutX;
+  animation-name: swingOutDown;
 }
 .transition.swing.out.up {
   transform-origin:bottom center;
-  transition-timing-function: ease-in;
-  animation-name: swingOutX;
+  animation-name: swingOutUp;
 }
 .transition.swing.out.left {
   transform-origin: center right;
-  transition-timing-function: ease-in;
-  animation-name: swingOutY;
+  animation-name: swingOutLeft;
 }
 .transition.swing.out.right {
   transform-origin: center left;
-  transition-timing-function: ease-in;
-  animation-name: swingOutY;
+  animation-name: swingOutRight;
 }
 
+/* In */
 @keyframes swingInX {
   0% {
-    transform: perspective(1000px) rotateX(-90deg);
+    transform: perspective(1000px) rotateX(90deg);
     opacity: 0;
   }
   40% {
-    transform: perspective(1000px) rotateX(20deg);
+    transform: perspective(1000px) rotateX(-20deg);
   }
   60% {
-    transform: perspective(1000px) rotateX(-10deg);
+    transform: perspective(1000px) rotateX(10deg);
   }
   80% {
-    transform: perspective(1000px) rotateX(5deg);
+    transform: perspective(1000px) rotateX(-5deg);
     opacity: 1;
   }
   100% {
@@ -725,7 +730,22 @@
     transform: perspective(1000px) rotateY(0deg);
   }
 }
-@keyframes swingOutX {
+
+/* Out */
+@keyframes swingOutUp {
+  0% {
+    transform: perspective(1000px) rotateX(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateX(-20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+@keyframes swingOutDown {
   0% {
     transform: perspective(1000px) rotateX(0deg);
   }
@@ -738,7 +758,7 @@
     opacity: 0;
   }
 }
-@keyframes swingOutY {
+@keyframes swingOutLeft {
   0% {
     transform: perspective(1000px) rotateY(0deg);
   }
@@ -751,6 +771,19 @@
     opacity: 0;
   }
 }
+@keyframes swingOutRight {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+  }
+  30% {
+    transform: perspective(1000px) rotateY(-20deg);
+    opacity:1;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(90deg);
+    opacity: 0;
+  }
+}
 
 /*******************************
        Static Animations
@@ -772,7 +805,6 @@
 .tada.transition {
   animation-name: tada;
 }
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 .pulse.transition {
   animation-name: pulse;
 }