removed fallback transition CSS for non-3D browsers

This commit is contained in:
scottjehl 2012-01-09 15:52:43 +07:00
parent 2f088cb2e3
commit dbd03bf0df
4 changed files with 7 additions and 117 deletions

View file

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

View file

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

View file

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

View file

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