diff --git a/dist/ionic.css b/dist/ionic.css index 81fae96569..e56a5d22b6 100644 --- a/dist/ionic.css +++ b/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); } diff --git a/dist/ionic.js b/dist/ionic.js index 69a8b5b445..72325fb5c4 100644 --- a/dist/ionic.js +++ b/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(); diff --git a/js/animate.js b/js/animate.js new file mode 100644 index 0000000000..f64cc63108 --- /dev/null +++ b/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 || {}); diff --git a/js/platform.js b/js/platform.js index ed6f2dd847..51f25f8763 100644 --- a/js/platform.js +++ b/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]); diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss index 2b55fa52cc..62656ac881 100644 --- a/scss/ionic/_animations.scss +++ b/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; diff --git a/scss/ionic/_modal.scss b/scss/ionic/_modal.scss index 236b24f939..16aa3dfafc 100644 --- a/scss/ionic/_modal.scss +++ b/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 diff --git a/test/modals.html b/test/modals.html index 806d6c0e75..81e36be0a6 100644 --- a/test/modals.html +++ b/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);