Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Moved non-3D rules to the bottom to hide the ugliness

Browse source 
Rule order doesn't seem to matter because of specificity.
This commit is contained in:
toddparker 2012-01-04 18:31:28 -05:00 committed by scottjehl
parent 7dcce519f7
commit 21c53b646f
2 changed files with 64 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
css/structure/jquery.mobile.transitions.flip.css
View file

@ -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) ; }
}
}
/* 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;
}

83
css/structure/jquery.mobile.transitions.slide.css
View file

@ -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;
}