Working on animator

dist/ionic.css

@@ -1436,6 +1436,7 @@ address {
 .modal {
   position: fixed;
   z-index: 10;
+  visibility: hidden;
   top: 0;
   width: 100%;
   min-height: 100%;
@@ -1445,6 +1446,7 @@ address {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }
   .modal.active {
+    visibility: visible;
     opacity: 1;
     height: 100%;
     -webkit-transform: translate3d(0, 0, 0);
@@ -2146,7 +2148,7 @@ a.button {
   transition: transform 0.25s, opacity 1ms 0.25s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); }
 
-.slide-in-up.active {
+.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); }

dist/ionic.js

@@ -32,9 +32,7 @@ if ( document.readyState === "complete" ) {
     detect: function() {
       var platforms = [];
 
-      console.log('Checking platforms');
       var platform = this._checkPlatforms(platforms);
-      console.log('Got platforms', platforms);
 
       for(var i = 0; i < platforms.length; i++) {
         document.body.classList.add('platform-' + platforms[i]);
@@ -53,7 +51,9 @@ if ( document.readyState === "complete" ) {
     // Check if we are running in Cordova, which will have
     // window.device available.
     isCordova: function() {
-      return 'device' in window;
+      return (window.cordova || window.PhoneGap || window.phonegap);
+      //&& /^file:\/{3}[^\/]/i.test(window.location.href) 
+      //&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
     },
     isIOS7: function() {
       if(!window.device) {
@@ -1624,6 +1624,21 @@ if ( document.readyState === "complete" ) {
     }
   };
 })(ionic = window.ionic || {});
+;(function(ionic) {
+  ionic.Animator = {
+    animate: function(element, fn) {
+      var endFunc = function() {
+        console.log('Animation finished for element', element);
+        element.removeEventListener('webkitTransitionEnd', endFunc);
+        element.removeEventListener('transitionEnd', endFunc);
+      };
+      element.addEventListener('webkitTransitionEnd', endFunc);
+      element.addEventListener('transitionEnd', endFunc);
+
+      element.classList.add('enter');
+    }
+  };
+})(ionic = window.ionic || {});
 ;(function(ionic) {
   ionic.ViewController = function(options) {
     this.init();

js/animate.js

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

js/platform.js

@@ -4,9 +4,7 @@
     detect: function() {
       var platforms = [];
 
-      console.log('Checking platforms');
       var platform = this._checkPlatforms(platforms);
-      console.log('Got platforms', platforms);
 
       for(var i = 0; i < platforms.length; i++) {
         document.body.classList.add('platform-' + platforms[i]);

scss/ionic/_animations.scss

@@ -20,7 +20,7 @@ $bezier-function: cubic-bezier(.1, .5, .1, 1);
   -webkit-transition-timing-function: $bezier-function;
 }
 
-.slide-in-up.active {
+.slide-in-up.enter {
   -webkit-transition: -webkit-transform .25s;
           transition:         transform .25s;
   -webkit-transition-timing-function: $bezier-function;

scss/ionic/_modal.scss

@@ -6,6 +6,7 @@
   position: fixed; 
 
   z-index: $zindex-modal;
+  visibility: hidden;
 
   top: 0;
 
@@ -16,7 +17,7 @@
 
   background-color: $modal-bg-color;
 
-  // Start it hidden
+  // Start hidden
   opacity: 0;
 
   // Start it down low
@@ -25,6 +26,8 @@
 
   // Active modal
   &.active {
+    visibility: visible;
+
     opacity: 1;
     height: 100%;
     // Put it up

test/modals.html

@@ -41,14 +41,17 @@
 
       ionic.on('tap', function(e) {
         var modal = document.getElementById('modal');
-        modal.classList.add('active');
+        //modal.classList.add('active');
+        ionic.Animator.animate(modal, function() {
+          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');
         return false;
       }, closer);
     </script>