From bf2600ab970ed8d0a4398e147470555a47a3893a Mon Sep 17 00:00:00 2001
From: Anh Quang Do <quanganhdo@gmail.com>
Date: Wed, 22 May 2013 14:59:10 -0500
Subject: [PATCH] Add support for slide-up and slide-down transitions

---
 lib/css/push.css | 10 +++++++++-
 lib/js/push.js   | 15 +++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/lib/css/push.css b/lib/css/push.css
index d3770a8..b896cf0 100644
--- a/lib/css/push.css
+++ b/lib/css/push.css
@@ -26,4 +26,12 @@
 .content.slide.right {
   -webkit-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
-}
\ No newline at end of file
+}
+.content.slide.up {
+  -webkit-transform: translate3d(0, -100%, 0);
+          transform: translate3d(0, -100%, 0);
+}
+.content.slide.down {
+  -webkit-transform: translate3d(0, 100%, 0);
+          transform: translate3d(0, 100%, 0);
+}
diff --git a/lib/js/push.js b/lib/js/push.js
index e0e772d..0ca22f8 100644
--- a/lib/js/push.js
+++ b/lib/js/push.js
@@ -20,6 +20,8 @@
   var transitionMap  = {
     'slide-in'  : 'slide-out',
     'slide-out' : 'slide-in',
+    'slide-up'  : 'slide-up',
+    'slide-down': 'slide-down', 
     'fade'      : 'fade'
   };
   
@@ -268,7 +270,7 @@
   // ============
 
   var swapContent = function (swap, container, transition, complete) {
-    var enter;
+    var directions = ['up', 'left', 'right', 'down'];
     var containerDirection;
     var swapDirection;
 
@@ -277,16 +279,17 @@
       else if (swap.classList.contains('content')) document.body.appendChild(swap);
       else document.body.insertBefore(swap, document.querySelector('.content'));
     } else {
-      enter  = /in$/.test(transition);
-
       if (transition == 'fade') {
         container.classList.add('in');
         container.classList.add('fade');
         swap.classList.add('fade');
       }
+      
+      if (transition == 'slide-in') transition = 'slide-right';
+      if (transition == 'slide-out') transition = 'slide-left';
 
       if (/slide/.test(transition)) {
-        swap.classList.add(enter ? 'right' : 'left');
+        swap.classList.add(transition.substr(6));
         swap.classList.add('slide');
         container.classList.add('slide');
       }
@@ -317,8 +320,8 @@
 
     if (/slide/.test(transition)) {
       container.offsetWidth; // force reflow
-      swapDirection      = enter ? 'right' : 'left'
-      containerDirection = enter ? 'left' : 'right'
+      swapDirection      = transition.substr(6);
+      containerDirection = directions[3 - directions.indexOf(swapDirection)];
       container.classList.add(containerDirection);
       swap.classList.remove(swapDirection);
       swap.addEventListener('webkitTransitionEnd', slideEnd);