mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-25 16:44:43 +00:00
split the slide transitions into 3 files for slide, slidedown, and slideup
This commit is contained in:
scottjehl
parent
dbd03bf0df
commit
984edf8cc7
4 changed files with 87 additions and 107 deletions
|
|
@ -6,6 +6,8 @@ $files = array_merge($files, array(
|
|||
'../../structure/jquery.mobile.transitions.fade.css',
|
||||
'../../structure/jquery.mobile.transitions.pop.css',
|
||||
'../../structure/jquery.mobile.transitions.slide.css',
|
||||
'../../structure/jquery.mobile.transitions.slidedown.css',
|
||||
'../../structure/jquery.mobile.transitions.slideup.css',
|
||||
'../../structure/jquery.mobile.transitions.flip.css',
|
||||
'../../structure/jquery.mobile.transitions.rotate.css',
|
||||
'../../structure/jquery.mobile.grids.css',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* slide transition */
|
||||
.slide.out {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-webkit-animation-name: slideouttoleft;
|
||||
|
|
@ -26,77 +27,6 @@
|
|||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
|
||||
/* slide up */
|
||||
|
||||
.slideup.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
}
|
||||
|
||||
.slideup.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfrombottom;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfrombottom;
|
||||
}
|
||||
|
||||
.slideup.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slideup.out.reverse {
|
||||
-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;
|
||||
}
|
||||
|
||||
.slidedown.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfromtop;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfromtop;
|
||||
}
|
||||
|
||||
.slidedown.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slidedown.out.reverse {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-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%); }
|
||||
|
|
@ -113,40 +43,4 @@
|
|||
@-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%); }
|
||||
}
|
||||
42
css/structure/jquery.mobile.transitions.slidedown.css
Normal file
42
css/structure/jquery.mobile.transitions.slidedown.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* slide down */
|
||||
.slidedown.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
}
|
||||
|
||||
.slidedown.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfromtop;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfromtop;
|
||||
}
|
||||
|
||||
.slidedown.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slidedown.out.reverse {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-webkit-animation-name: slideouttotop;
|
||||
-moz-animation-name: slideouttotop;
|
||||
}
|
||||
|
||||
@-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 slideouttotop {
|
||||
from { -webkit-transform: translateY(0); }
|
||||
to { -webkit-transform: translateY(-100%); }
|
||||
}
|
||||
@-moz-keyframes slideouttotop {
|
||||
from { -moz-transform: translateY(0); }
|
||||
to { -moz-transform: translateY(-100%); }
|
||||
}
|
||||
42
css/structure/jquery.mobile.transitions.slideup.css
Normal file
42
css/structure/jquery.mobile.transitions.slideup.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* slide up */
|
||||
.slideup.out {
|
||||
-webkit-animation-name: fadeout;
|
||||
-moz-animation-name: fadeout;
|
||||
}
|
||||
|
||||
.slideup.in {
|
||||
-webkit-transform: translateY(0);
|
||||
-webkit-animation-name: slideinfrombottom;
|
||||
-moz-transform: translateY(0);
|
||||
-moz-animation-name: slideinfrombottom;
|
||||
}
|
||||
|
||||
.slideup.in.reverse {
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
}
|
||||
|
||||
.slideup.out.reverse {
|
||||
-webkit-transform: translateY(100%);
|
||||
-moz-transform: translateY(100%);
|
||||
-webkit-animation-name: slideouttobottom;
|
||||
-moz-animation-name: slideouttobottom;
|
||||
}
|
||||
|
||||
@-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%); }
|
||||
}
|
||||
Loading…
Reference in a new issue