From 21c53b646ff60451aacacecd32478283be6402d0 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 18:31:28 -0500 Subject: [PATCH] Moved non-3D rules to the bottom to hide the ugliness Rule order doesn't seem to matter because of specificity. --- .../jquery.mobile.transitions.flip.css | 49 +++++------ .../jquery.mobile.transitions.slide.css | 83 +++++++++---------- 2 files changed, 64 insertions(+), 68 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 6f08802b..f5900038 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -5,31 +5,6 @@ * value. */ - -/* for non-3d supporting browsers, fallback to fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.ui-unsupported-csstransform3d .flip.in, -.ui-unsupported-csstransform3d .flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - - -/* for 3d supporting browsers, use flip */ - .ui-supported-csstransform3d .viewport-flip { -webkit-perspective: 1000; -moz-perspective: 1000; @@ -94,4 +69,26 @@ @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0) ; } to { -moz-transform: rotateY(180deg) ; } -} \ No newline at end of file +} + + +/* for non-3d supporting browsers, fallback to fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.ui-unsupported-csstransform3d .flip.in, +.ui-unsupported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 7e3af5b8..b31eb5df 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,45 +1,3 @@ -/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ -.ui-unsupported-csstransform3d .slide.in, -.ui-unsupported-csstransform3d .slide.in.reverse, -.ui-unsupported-csstransform3d .slideup.in.reverse, -.ui-unsupported-csstransform3d .slidedown.in.reverse { - z-index:10; - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* in non-3D browsers, get rid of the fade out animation and use the same timing */ -.ui-unsupported-csstransform3d .slideup.out, -.ui-unsupported-csstransform3d .slidedown.out - { - z-index:0; - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-in; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* in non-3D browsers, use similiar timing for slides that we don't need to exclude fades from */ -.ui-unsupported-csstransform3d .slide.out, -.ui-unsupported-csstransform3d .slide.out.reverse, -.ui-unsupported-csstransform3d .slideup.in, -.ui-unsupported-csstransform3d .slideup.out.reverse, -.ui-unsupported-csstransform3d .slidedown.out.reverse, -.ui-unsupported-csstransform3d .slidedown.in { - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-out; -} - -/* slide */ - .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -200,3 +158,44 @@ from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } } + + +/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ +.ui-unsupported-csstransform3d .slide.in, +.ui-unsupported-csstransform3d .slide.in.reverse, +.ui-unsupported-csstransform3d .slideup.in.reverse, +.ui-unsupported-csstransform3d .slidedown.in.reverse { + z-index:10; + -webkit-animation-name: nofade; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; + -moz-animation-name: nofade; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; +} + +/* Also get rid of the fade out animation and use the same timing */ +.ui-unsupported-csstransform3d .slideup.out, +.ui-unsupported-csstransform3d .slidedown.out + { + z-index:0; + -webkit-animation-name: nofade; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-in; + -moz-animation-name: nofade; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; +} + +/* use similiar timing for slides that we don't need to exclude fades from */ +.ui-unsupported-csstransform3d .slide.out, +.ui-unsupported-csstransform3d .slide.out.reverse, +.ui-unsupported-csstransform3d .slideup.in, +.ui-unsupported-csstransform3d .slideup.out.reverse, +.ui-unsupported-csstransform3d .slidedown.out.reverse, +.ui-unsupported-csstransform3d .slidedown.in { + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-out; +} \ No newline at end of file