mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-20 22:30:59 +00:00
0edc6271a5
- Introduced a class (nofade) which is similar to dontmove for overwriting the fade in/out classes. We're not scoping all classes to with supported or not like in flip so we need to negate the fade rules with a new animation - Added a selector block at the top to lengthen all slide animations to 300ms to reduce blinkiness on Android. Shorter caused animations to break out of sequence. Needs refinement on timing. - Added rules to apply the "nofade" classes to the replace the fade in/out animations for non-3D browsers. Had to set the duration equal to the slide animations to keep it all in sync.
197 lines
4.8 KiB
CSS
197 lines
4.8 KiB
CSS
/* give the transition more time if sliding to prevent hiccups, different from the global defaults */
|
|
.slide.in,
|
|
.slide.out,
|
|
.slide.out.reverse,
|
|
.slideup.in,
|
|
.slideup.out.reverse,
|
|
.slidedown.in,
|
|
.slidedown.in.reverse {
|
|
-webkit-animation-duration: 300ms;
|
|
-moz-animation-duration: 300ms;
|
|
-webkit-animation-timing-function: ease-in;
|
|
-moz-animation-timing-function: ease-in;
|
|
}
|
|
|
|
/* in non-3D browsers, get rid of the fade in animation */
|
|
.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: 300ms;
|
|
-moz-animation-name: nofade;
|
|
-moz-animation-duration: 300ms;
|
|
}
|
|
|
|
/* in non-3D browsers, get rid of the fade out animation */
|
|
.ui-unsupported-csstransform3d .slideup.out,
|
|
.ui-unsupported-csstransform3d .slidedown.out
|
|
{
|
|
z-index:0;
|
|
-webkit-animation-name: nofade;
|
|
-webkit-animation-duration: 300ms;
|
|
}
|
|
|
|
/* slide */
|
|
|
|
.slide.out {
|
|
-webkit-transform: translateX(-100%);
|
|
-webkit-animation-name: slideouttoleft;
|
|
-moz-transform: translateX(-100%);
|
|
-moz-animation-name: slideouttoleft;
|
|
}
|
|
|
|
.slide.in {
|
|
-webkit-transform: translateX(0);
|
|
-webkit-animation-name: fadein;
|
|
-moz-transform: translateX(0);
|
|
-moz-animation-name: fadein;
|
|
}
|
|
|
|
.slide.out.reverse {
|
|
-webkit-transform: translateX(100%);
|
|
-webkit-animation-name: slideouttoright;
|
|
-moz-transform: translateX(100%);
|
|
-moz-animation-name: slideouttoright;
|
|
}
|
|
|
|
.slide.in.reverse {
|
|
-webkit-transform: translateX(0);
|
|
-webkit-animation-name: fadein;
|
|
-moz-transform: translateX(0);
|
|
-moz-animation-name: fadein;
|
|
}
|
|
|
|
|
|
/* slide up */
|
|
|
|
.slideup.out {
|
|
-webkit-animation-name: fadeout;
|
|
-moz-animation-name: fadeout;
|
|
z-index: 0;
|
|
}
|
|
|
|
.slideup.in {
|
|
-webkit-transform: translateY(0);
|
|
-webkit-animation-name: slideinfrombottom;
|
|
-moz-transform: translateY(0);
|
|
-moz-animation-name: slideinfrombottom;
|
|
z-index: 10;
|
|
}
|
|
|
|
.slideup.in.reverse {
|
|
z-index: 0;
|
|
-webkit-animation-name: fadein;
|
|
-moz-animation-name: fadein;
|
|
}
|
|
|
|
.slideup.out.reverse {
|
|
z-index: 10;
|
|
-webkit-transform: translateY(100%);
|
|
-moz-transform: translateY(100%);
|
|
-webkit-animation-name: slideouttobottom;
|
|
-moz-animation-name: slideouttobottom;
|
|
}
|
|
|
|
/* slide down */
|
|
|
|
.slidedown.out {
|
|
-webkit-animation-name: fadeout;
|
|
-moz-animation-name: fadeout;
|
|
z-index: 0;
|
|
}
|
|
|
|
.slidedown.in {
|
|
-webkit-transform: translateY(0);
|
|
-webkit-animation-name: slideinfromtop;
|
|
-moz-transform: translateY(0);
|
|
-moz-animation-name: slideinfromtop;
|
|
z-index: 10;
|
|
}
|
|
|
|
.slidedown.in.reverse {
|
|
z-index: 0;
|
|
-webkit-animation-name: fadein;
|
|
-moz-animation-name: fadein;
|
|
}
|
|
|
|
.slidedown.out.reverse {
|
|
-webkit-transform: translateY(-100%);
|
|
-moz-transform: translateY(-100%);
|
|
z-index: 10;
|
|
-webkit-animation-name: slideouttotop;
|
|
-moz-animation-name: slideouttotop;
|
|
}
|
|
|
|
@-webkit-keyframes slideinfromright {
|
|
from { -webkit-transform: translateX(100%); }
|
|
to { -webkit-transform: translateX(0); }
|
|
}
|
|
@-moz-keyframes slideinfromright {
|
|
from { -moz-transform: translateX(100%); }
|
|
to { -moz-transform: translateX(0); }
|
|
}
|
|
|
|
@-webkit-keyframes slideinfromleft {
|
|
from { -webkit-transform: translateX(-100%); }
|
|
to { -webkit-transform: translateX(0); }
|
|
}
|
|
@-moz-keyframes slideinfromleft {
|
|
from { -moz-transform: translateX(-100%); }
|
|
to { -moz-transform: translateX(0); }
|
|
}
|
|
|
|
@-webkit-keyframes slideouttoleft {
|
|
from { -webkit-transform: translateX(0); }
|
|
to { -webkit-transform: translateX(-100%); }
|
|
}
|
|
@-moz-keyframes slideouttoleft {
|
|
from { -moz-transform: translateX(0); }
|
|
to { -moz-transform: translateX(-100%); }
|
|
}
|
|
|
|
@-webkit-keyframes slideouttoright {
|
|
from { -webkit-transform: translateX(0); }
|
|
to { -webkit-transform: translateX(100%); }
|
|
}
|
|
@-moz-keyframes slideouttoright {
|
|
from { -moz-transform: translateX(0); }
|
|
to { -moz-transform: translateX(100%); }
|
|
}
|
|
|
|
@-webkit-keyframes slideinfromtop {
|
|
from { -webkit-transform: translateY(-100%); }
|
|
to { -webkit-transform: translateY(0); }
|
|
}
|
|
@-moz-keyframes slideinfromtop {
|
|
from { -moz-transform: translateY(-100%); }
|
|
to { -moz-transform: translateY(0); }
|
|
}
|
|
|
|
@-webkit-keyframes slideinfrombottom {
|
|
from { -webkit-transform: translateY(100%); }
|
|
to { -webkit-transform: translateY(0); }
|
|
}
|
|
@-moz-keyframes slideinfrombottom {
|
|
from { -moz-transform: translateY(100%); }
|
|
to { -moz-transform: translateY(0); }
|
|
}
|
|
|
|
@-webkit-keyframes slideouttobottom {
|
|
from { -webkit-transform: translateY(0); }
|
|
to { -webkit-transform: translateY(100%); }
|
|
}
|
|
@-moz-keyframes slideouttobottom {
|
|
from { -moz-transform: translateY(0); }
|
|
to { -moz-transform: translateY(100%); }
|
|
}
|
|
|
|
@-webkit-keyframes slideouttotop {
|
|
from { -webkit-transform: translateY(0); }
|
|
to { -webkit-transform: translateY(-100%); }
|
|
}
|
|
@-moz-keyframes slideouttotop {
|
|
from { -moz-transform: translateY(0); }
|
|
to { -moz-transform: translateY(-100%); }
|
|
}
|