mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
removed fallback transition CSS for non-3D browsers
This commit is contained in:
parent
2f088cb2e3
commit
dbd03bf0df
4 changed files with 7 additions and 117 deletions
|
|
@ -18,16 +18,4 @@
|
|||
-webkit-animation-duration: 225ms;
|
||||
-moz-animation-timing-function: ease-in;
|
||||
-moz-animation-duration: 225;
|
||||
}
|
||||
|
||||
|
||||
/* a dummy transition to override animations in non-3D browsers */
|
||||
|
||||
@-webkit-keyframes nofade {
|
||||
from { outline:0; }
|
||||
to { outline:0; }
|
||||
}
|
||||
@-moz-keyframes nofade {
|
||||
from { outline:0; }
|
||||
to { outline:0; }
|
||||
}
|
||||
|
|
@ -5,44 +5,42 @@
|
|||
* value.
|
||||
*/
|
||||
|
||||
.ui-supported-csstransform3d .viewport-flip {
|
||||
.viewport-flip {
|
||||
-webkit-perspective: 1000;
|
||||
-moz-perspective: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
.ui-supported-csstransform3d .flip {
|
||||
.flip {
|
||||
-webkit-backface-visibility:hidden;
|
||||
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
-moz-backface-visibility:hidden;
|
||||
-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
|
||||
}
|
||||
|
||||
.ui-supported-csstransform3d .flip.out {
|
||||
.flip.out {
|
||||
-webkit-transform: rotateY(-90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoleft;
|
||||
-moz-transform: rotateY(-90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoleft;
|
||||
}
|
||||
|
||||
.ui-supported-csstransform3d .flip.in {
|
||||
.flip.in {
|
||||
-webkit-animation-name: flipintoright;
|
||||
-moz-animation-name: flipintoright;
|
||||
}
|
||||
|
||||
.ui-supported-csstransform3d .flip.out.reverse {
|
||||
.flip.out.reverse {
|
||||
-webkit-transform: rotateY(90deg) scale(.9);
|
||||
-webkit-animation-name: flipouttoright;
|
||||
-moz-transform: rotateY(90deg) scale(.9);
|
||||
-moz-animation-name: flipouttoright;
|
||||
}
|
||||
|
||||
.ui-supported-csstransform3d .flip.in.reverse {
|
||||
.flip.in.reverse {
|
||||
-webkit-animation-name: flipintoleft;
|
||||
-moz-animation-name: flipintoleft;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes flipouttoleft {
|
||||
from { -webkit-transform: rotateY(0); }
|
||||
to { -webkit-transform: rotateY(-90deg) scale(.9); }
|
||||
|
|
@ -74,25 +72,4 @@
|
|||
@-moz-keyframes flipintoright {
|
||||
from { -moz-transform: rotateY(90deg) scale(.9); }
|
||||
to { -moz-transform: rotateY(0); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* for non-3d supporting browsers, fallback to fade */
|
||||
.ui-unsupported-csstransform3d .flip.out,
|
||||
.ui-unsupported-csstransform3d .flip.out.reverse {
|
||||
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;
|
||||
-webkit-animation-duration: 300ms;
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-duration: 300ms;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
}
|
||||
|
|
@ -71,40 +71,4 @@
|
|||
-moz-transform: scale(.8);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* for non-3d supporting browsers, remove the fade and just animate size */
|
||||
|
||||
.ui-unsupported-csstransform3d .pop.out,
|
||||
.ui-unsupported-csstransform3d .pop.in.reverse {
|
||||
-webkit-animation-duration: 200ms;
|
||||
-webkit-animation-name: nofade;
|
||||
}
|
||||
|
||||
.ui-unsupported-csstransform3d .pop.in {
|
||||
-webkit-animation-name: popin-basic;
|
||||
-webkit-animation-duration: 325ms;
|
||||
}
|
||||
.ui-unsupported-csstransform3d .pop.out.reverse {
|
||||
-webkit-transform: scale(0);
|
||||
-webkit-animation-name: popout-basic;
|
||||
-webkit-animation-duration: 325ms;
|
||||
}
|
||||
|
||||
@-webkit-keyframes popin-basic {
|
||||
from {
|
||||
-webkit-transform: scale(0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes popout-basic {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -149,43 +149,4 @@
|
|||
@-moz-keyframes slideouttotop {
|
||||
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 {
|
||||
-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
|
||||
{
|
||||
-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;
|
||||
}
|
||||
Loading…
Reference in a new issue