Browse files

Some experimentation with hiding 'from' pages offscreen instead of us…

…ing display:none or visibility:hidden, which seems to cause flashing on the platforms like the Motorola Xoom (Android 3.1).
  • Loading branch information...
1 parent 6043388 commit 029280ed12417ecff84cf84531f6d82831fbeb09 @jblas jblas committed Sep 6, 2011
View
10 js/jquery.mobile.transition.js
@@ -88,11 +88,10 @@ function css3TransitionsHandler( name, reverse, $to, $from ) {
// Now strip off the transition classes used to animate
// the elements.
-
- $both.removeClass( "out in reverse animate " + name );
+// $both.removeClass( "out in reverse animate " + name );
+ $to.removeClass( "out in reverse animate " + name );
$to.parent().removeClass( viewportClass );
-
// Tell the caller of the transition handler that we're
// all done.
@@ -109,6 +108,7 @@ function css3TransitionsHandler( name, reverse, $to, $from ) {
// if we haven't recieved a "transitionend" notification within the alotted time.
doneTimer = setTimeout(function() {
+alert("uh-oh done timer fired!");
if( $.support.cssTransitions ) {
$to.unbind( "transitionend webkitTransitionEnd OTransitionEnd", doneFunc );
}
@@ -124,8 +124,12 @@ function css3TransitionsHandler( name, reverse, $to, $from ) {
$from.addClass( name + " out" + reverseClass );
}
+ $to.removeClass( "out in reverse animate " + ( $to.data("last-transition") || "" ) );
+
$to.addClass( name + " in" + reverseClass );
+ $both.data("last-transition", name);
+
// Fire off a timer that will add the "animate" class which triggers the CSS
// rules for the "to" and "from" elements that specify new CSS property values
// that will kick-off the transitions.
View
4 themes/default/jquery.mobile.core.css
@@ -13,8 +13,8 @@
.ui-mobile-viewport { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* "page" containers - full-screen views, one should always be in view post-pageload */
-.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
-.ui-mobile .ui-page-active { display: block; overflow: visible; }
+.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 0; height: 0; position: absolute; left: -100%; overflow: hidden; border: 0; }
+.ui-mobile .ui-page-active { left: 0; overflow: visible; width: 100%; min-height: 100%; }
/*orientations from js are available */
.portrait,
View
10 themes/default/jquery.mobile.transitions.css
@@ -22,13 +22,13 @@
transition: 350ms ease-in-out;
}
-/* To avoid flashing, we need to make sure we toggle
- * the display/visibility of the page that is being
- * transitioned to at the same time we set its z-index.
+/* By default, all pages are hidden offscreen. Since the 'out' page
+ * is already visible (via ui-page-active class), we need to make sure
+ * the 'in' page is visible too.
*/
.ui-page.in {
- display: block;
- visibility: visible;
+ left: 0;
+ overflow: visible;
}
.slide.animate,

0 comments on commit 029280e

Please sign in to comment.