diff --git a/src/css/mobile.css b/src/css/mobile.css index 9ee701e6e..8798f180c 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -406,17 +406,19 @@ to prevent collapsing during animation*/ right: 0; animation-timing-function: linear; - animation-duration: 10s; + animation-duration: .3s; animation-iteration-count: 1; animation-fill-mode: both; -webkit-animation-timing-function: linear; - -webkit-animation-duration: 10s; + -webkit-animation-duration: .3s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; } .CslideInUp { + transform: translate3d(0, 100%, 0); + -webkit-transform: translate3d(0, 100%, 0); -webkit-animation-name: slideInUp; animation-name: slideInUp; z-index: 1003; @@ -432,6 +434,8 @@ to prevent collapsing during animation*/ z-index: 1003; } .CslideInRight { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); -webkit-animation-name: slideInRight; animation-name: slideInRight; z-index: 1003; diff --git a/src/js/routes.js b/src/js/routes.js index 3d0eda6c0..22fccd09f 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -381,7 +381,7 @@ angular }; - var transitionReady; + var cachedTransitionState, cachedBackPanel; $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { @@ -417,42 +417,51 @@ angular * -------------------- */ - function cleanUpLater (e, e2) { - var cleanedUp = false; + function cleanUpLater(e, e2) { + var cleanedUp = false, timeoutID; var cleanUp = function() { if (cleanedUp) return; +console.log('[routes.js.423:cleanedUp:]',cleanedUp); //TODO cleanedUp = true; e2.parentNode.removeChild(e2); e2.innerHTML = ""; e.className = ''; + cachedBackPanel = null; + cachedTransitionState = ''; + if (timeoutID) { + timeoutID=null; + window.clearTimeout(timeoutID); + } }; e.addEventListener("animationend", cleanUp, true); e2.addEventListener("animationend", cleanUp, true); e.addEventListener("webkitAnimationEnd", cleanUp, true); e2.addEventListener("webkitAnimationEnd", cleanUp, true); - setTimeout(cleanUp, 11000); + // TODO + timeoutID = setTimeout(cleanUp, 500); }; function animateTransition(fromState, toState, event) { // Animation in progress? var x = document.getElementById('mainSectionDup'); - if (x) { + if (x && !cachedTransitionState) { console.log('Anim in progress'); - event.preventDefault(); - return; + return true; } var fromName = fromState.name; var toName = toState.name; -console.log('[routes.js.446:fromName:]',fromName, toName); //TODO + console.log('[routes.js.446:from/toName:]', fromName, toName); //TODO + if (!fromName || !toName) + return true; var fromWeight = pageWeight[fromName]; var toWeight = pageWeight[toName]; -console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO - var entering = null, leaving = null; + var entering = null, + leaving = null; if (fromWeight && toWeight) { if (fromWeight > toWeight) { @@ -461,27 +470,43 @@ console.log('[routes.js.446:fromName:]',fromWeight, toWeight); //TODO entering = 'CslideInRight'; } } else if (fromName && fromWeight >= 0 && toWeight >= 0) { - if (toName) { + if (toWeight) { entering = 'CslideInUp'; } else { leaving = 'CslideOutDown'; } } -console.log('[routes.js.467]', entering, leaving); //TODO - + console.log('[routes.js.467]', entering, leaving); //TODO var e = document.getElementById('mainSection'); - var e2 = e.cloneNode(true); - var c = document.getElementById('sectionContainer'); - e2.id = 'mainSectionDup'; + var desiredTransitionState = (fromName || '-') + ':' + (toName || '-'); - c.appendChild(e2); - e.className = entering || ''; - e2.className = leaving || ''; - cleanUpLater(e,e2); + if (desiredTransitionState == cachedTransitionState) { + e.className = entering || ''; + cachedBackPanel.className = leaving || ''; + cleanUpLater(e, cachedBackPanel); + console.log('USing', cachedTransitionState); //TODO + return true; + } else { + cachedBackPanel = e.cloneNode(true); + cachedBackPanel.id = 'mainSectionDup'; + var c = document.getElementById('sectionContainer'); + c.appendChild(cachedBackPanel); + + cachedTransitionState = desiredTransitionState; + console.log('CACHing', cachedTransitionState); //TODO + return false; + } + } + + if (!animateTransition(fromState, toState)) { + event.preventDefault(); + // Time for the backpane to render + setTimeout(function() { + $state.transitionTo(toState); + }, 50); } - animateTransition(fromState, toState, event); }); });