Add support for slide-up and slide-down transitions

lib/css/push.css

@@ -26,4 +26,12 @@
 .content.slide.right {
   -webkit-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
-}
+}
+.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);
+}

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);