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

Added "nofade" transition, slide/up/down for non-3D devices

Browse source 
- 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.
This commit is contained in:
toddparker 2012-01-04 13:55:06 -05:00 committed by scottjehl
parent 373abd7623
commit 0edc6271a5
2 changed files with 57 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
css/structure/jquery.mobile.transitions.css
View file

@ -8,14 +8,25 @@
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 300ms;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 300ms;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 150ms;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 150ms;
-moz-animation-duration: 225;
}
@-webkit-keyframes nofade {
from { opacity:1; }
to { opacity:1; }
}
@-moz-keyframes nofade {
from { opacity:1; }
to { opacity:1; }
}

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

@ -1,3 +1,40 @@
/* 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;
@ -26,6 +63,9 @@
-moz-animation-name: fadein;
}
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
@ -54,6 +94,8 @@
-moz-animation-name: slideouttobottom;
}
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;