Basic animation stuff

dist/ionic.css

@@ -1436,7 +1436,6 @@ address {
 .modal {
   position: fixed;
   z-index: 10;
-  visibility: hidden;
   top: 0;
   width: 100%;
   min-height: 100%;
@@ -1446,11 +1445,10 @@ address {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }
   .modal.active {
-    visibility: visible;
+    -webkit-transform: translate3d(0, 0%, 0);
+    transform: translate3d(0, 0%, 0);
     opacity: 1;
-    height: 100%;
+    height: 100%; }
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0); }
 
 .list {
   margin-bottom: 20px;
@@ -2144,11 +2142,18 @@ a.button {
 .slide-in-up {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
-  transition: transform 0.25s, opacity 1ms 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
-
-.slide-in-up.enter {
-  -webkit-transition: -webkit-transform 0.25s;
-  transition: transform 0.25s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
+  .slide-in-up.enter {
+    -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+    transition: transform 0.25s, opacity 1ms 0.25s; }
+  .slide-in-up.enter-active {
+    -webkit-transition: -webkit-transform 0.25s;
+    transition: transform 0.25s;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); }
+  .slide-in-up.leave {
+    -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s;
+    transition: transform 0.25s, opacity 1ms 0.25s; }
+  .slide-in-up.leave-active {
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0); }

dist/ionic.js

@@ -1626,16 +1626,44 @@ if ( document.readyState === "complete" ) {
 })(ionic = window.ionic || {});
 ;(function(ionic) {
   ionic.Animator = {
-    animate: function(element, fn) {
+    animate: function(element, className, fn) {
-      var endFunc = function() {
+      return {
-        console.log('Animation finished for element', element);
+        leave: function() {
-        element.removeEventListener('webkitTransitionEnd', endFunc);
+          var endFunc = function() {
-        element.removeEventListener('transitionEnd', endFunc);
+            console.log('Animation finished for element', element);
-      };
-      element.addEventListener('webkitTransitionEnd', endFunc);
-      element.addEventListener('transitionEnd', endFunc);
 
-      element.classList.add('enter');
+            element.classList.remove('leave');
+            element.classList.remove('leave-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('leave');
+          element.classList.add('leave-active');
+          return this;
+        },
+        enter: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
+
+            element.classList.remove('enter');
+            element.classList.remove('enter-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('enter');
+          element.classList.add('enter-active');
+
+          return this;
+        }
+      };
     }
   };
 })(ionic = window.ionic || {});

js/animate.js

@@ -1,15 +1,43 @@
 (function(ionic) {
   ionic.Animator = {
-    animate: function(element, fn) {
+    animate: function(element, className, fn) {
-      var endFunc = function() {
+      return {
-        console.log('Animation finished for element', element);
+        leave: function() {
-        element.removeEventListener('webkitTransitionEnd', endFunc);
+          var endFunc = function() {
-        element.removeEventListener('transitionEnd', endFunc);
+            console.log('Animation finished for element', element);
-      };
-      element.addEventListener('webkitTransitionEnd', endFunc);
-      element.addEventListener('transitionEnd', endFunc);
 
-      element.classList.add('enter');
+            element.classList.remove('leave');
+            element.classList.remove('leave-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('leave');
+          element.classList.add('leave-active');
+          return this;
+        },
+        enter: function() {
+          var endFunc = function() {
+            console.log('Animation finished for element', element);
+
+            element.classList.remove('enter');
+            element.classList.remove('enter-active');
+
+            element.removeEventListener('webkitTransitionEnd', endFunc);
+            element.removeEventListener('transitionEnd', endFunc);
+          };
+          element.addEventListener('webkitTransitionEnd', endFunc);
+          element.addEventListener('transitionEnd', endFunc);
+
+          element.classList.add('enter');
+          element.classList.add('enter-active');
+
+          return this;
+        }
+      };
     }
   };
 })(ionic = window.ionic || {});

scss/ionic/_animations.scss

@@ -14,14 +14,29 @@ $bezier-function: cubic-bezier(.1, .5, .1, 1);
   -webkit-transform: translate3d(0, 100%, 0);
           transform: translate3d(0, 100%, 0);
 
-  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-          transition:         transform .25s, opacity 1ms .25s;
-
   -webkit-transition-timing-function: $bezier-function;
-}
 
-.slide-in-up.enter {
+  &.enter {
-  -webkit-transition: -webkit-transform .25s;
+
-          transition:         transform .25s;
+    -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-  -webkit-transition-timing-function: $bezier-function;
+            transition:         transform .25s, opacity 1ms .25s;
+
+  }
+
+  &.enter-active {
+    -webkit-transition: -webkit-transform .25s;
+            transition:         transform .25s;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+
+  &.leave {
+    -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
+            transition:         transform .25s, opacity 1ms .25s;
+  }
+
+  &.leave-active {
+    -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+  }
 }

scss/ionic/_modal.scss

@@ -6,7 +6,6 @@
   position: fixed; 
 
   z-index: $zindex-modal;
-  visibility: hidden;
 
   top: 0;
 
@@ -26,13 +25,10 @@
 
   // Active modal
   &.active {
-    visibility: visible;
+    -webkit-transform: translate3d(0, 0%, 0);
-
+            transform: translate3d(0, 0%, 0);
     opacity: 1;
     height: 100%;
-    // Put it up
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
   }
 }
 

test/modals.html

@@ -38,20 +38,22 @@
     <script src="../dist/ionic.js"></script>
     <script>
       var open = document.getElementById('modal-opener');
+      var anim = ionic.Animator.animate(modal, function() {
+        console.log('Animation finished');
+      });
 
       ionic.on('tap', function(e) {
         var modal = document.getElementById('modal');
-        //modal.classList.add('active');
+        modal.classList.add('active');
-        ionic.Animator.animate(modal, function() {
+        anim.enter();
-          console.log('Animation finished');
-        });
         return false;
       }, open);
 
       var closer = document.getElementById('modal-closer');
       ionic.on('tap', function(e) {
         var modal = document.getElementById('modal');
-        //modal.classList.remove('active');
+        modal.classList.remove('active');
+        anim.leave();
         return false;
       }, closer);
     </script>