From d90773ece9521e0db40c59a120d8973a4adf7946 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 14 Sep 2013 17:36:10 -0700
Subject: [PATCH] Push animation is way better now.

---
 dist/ratchet.css   | 30 +++++++++++++++++++++++-------
 dist/ratchet.js    |  6 +++---
 lib/js/push.js     |  6 +++---
 lib/sass/push.scss | 30 ++++++++++++++++++++++--------
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 55119a1..89ed80b 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -954,22 +954,38 @@ button.button-block {
   opacity: 1;
 }
 .content.slide {
+  z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition: -webkit-transform .3s;
-  transition: transform .3s;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  z-index: 2;
+  -webkit-transition: -webkit-transform 400ms;
+  transition: transform 400ms;
+}
+.content.slide.sliding-in.top, .content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-name: fadeOverlay;
+  animation-name: fadeOverlay;
+  -webkit-animation-duration: 400ms;
+}
+.content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-direction: reverse;
 }
 .content.slide.left {
   z-index: 1;
-  box-shadow: none;
-  -webkit-transform: translate3d(-60%, 0, 0);
-  transform: translate3d(-60%, 0, 0);
+  -webkit-transform: translate3d(-20%, 0, 0);
+  transform: translate3d(-20%, 0, 0);
 }
 .content.slide.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
 }
+
+@-webkit-keyframes fadeOverlay {
+  from {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  to {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/dist/ratchet.js b/dist/ratchet.js
index ae7c5c4..1224ebc 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -320,8 +320,8 @@
       }
 
       if (/slide/.test(transition)) {
-        swap.classList.add(enter ? 'right' : 'left');
-        swap.classList.add('slide');
+        swap.classList.add('sliding-in', enter ? 'right' : 'left');
+        swap.classList.add('slide', enter ? 'top' : 'bottom');
         container.classList.add('slide');
       }
 
@@ -359,7 +359,7 @@
 
       function slideEnd() {
         swap.removeEventListener('webkitTransitionEnd', slideEnd);
-        swap.classList.remove('slide');
+        swap.classList.remove('slide', 'bottom', 'top', 'sliding-in');
         swap.classList.remove(swapDirection);
         container.parentNode.removeChild(container);
         complete && complete();
diff --git a/lib/js/push.js b/lib/js/push.js
index e0e772d..7e693e9 100644
--- a/lib/js/push.js
+++ b/lib/js/push.js
@@ -286,8 +286,8 @@
       }
 
       if (/slide/.test(transition)) {
-        swap.classList.add(enter ? 'right' : 'left');
-        swap.classList.add('slide');
+        swap.classList.add('sliding-in', enter ? 'right' : 'left');
+        swap.classList.add('slide', enter ? 'top' : 'bottom');
         container.classList.add('slide');
       }
 
@@ -325,7 +325,7 @@
 
       function slideEnd() {
         swap.removeEventListener('webkitTransitionEnd', slideEnd);
-        swap.classList.remove('slide');
+        swap.classList.remove('slide', 'bottom', 'top', 'sliding-in');
         swap.classList.remove(swapDirection);
         container.parentNode.removeChild(container);
         complete && complete();
diff --git a/lib/sass/push.scss b/lib/sass/push.scss
index 3d4fb3f..1299599 100644
--- a/lib/sass/push.scss
+++ b/lib/sass/push.scss
@@ -18,19 +18,28 @@
 
   // Slide animation iOS7
   &.slide {
-    -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods
+    z-index: 2;
+    -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); // Inspired by @c2prods
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
-    -webkit-transition: -webkit-transform .3s;
-            transition:         transform .3s;
-    box-shadow: 0 0 10px rgba(0,0,0,.5);
-    z-index: 2;
+    -webkit-transition: -webkit-transform 400ms;
+            transition:         transform 400ms;
+
+    &.sliding-in.top,
+    &.right:not([class*="sliding-in"]) {
+      -webkit-animation-name: fadeOverlay;
+              animation-name: fadeOverlay;
+      -webkit-animation-duration: 400ms;
+    }
+
+    &.right:not([class*="sliding-in"]) {
+      -webkit-animation-direction: reverse;
+    }
 
     &.left {
       z-index: 1;
-      box-shadow: none;
-      -webkit-transform: translate3d(-60%, 0, 0); // Creates the parallax effect
-              transform: translate3d(-60%, 0, 0);
+      -webkit-transform: translate3d(-20%, 0, 0); // Creates the parallax effect
+              transform: translate3d(-20%, 0, 0);
     }
 
     &.right {
@@ -39,4 +48,9 @@
               transform: translate3d(100%, 0, 0);
     }
   }
+}
+
+@-webkit-keyframes fadeOverlay {
+  from { box-shadow: 0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0); }
+  to   { box-shadow: 0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1); }
 }
\ No newline at end of file