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

added an experimental 3D transition, "flow"

Browse source
This commit is contained in:
scottjehl 2012-01-09 21:09:12 +07:00
parent ffa23bc137
commit 8f5e263bd8
3 changed files with 88 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/structure/index.php
View file

@ -9,6 +9,7 @@ $files = array_merge($files, array(
'../../structure/jquery.mobile.transitions.slidedown.css',
'../../structure/jquery.mobile.transitions.slideup.css',
'../../structure/jquery.mobile.transitions.flip.css',
'../../structure/jquery.mobile.transitions.flow.css',
'../../structure/jquery.mobile.grids.css',
'../../structure/jquery.mobile.headerfooter.css',
'../../structure/jquery.mobile.navbar.css',

85
css/structure/jquery.mobile.transitions.flow.css Normal file
View file

@ -0,0 +1,85 @@
/* flow transition */
.flow {
-webkit-transform-origin: 30% 30%;
-moz-transform-origin: 30% 30%;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
-webkit-animation-name: flowouttoleft;
-webkit-animation-timing-function: ease;
-moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
}
.flow.in {
-webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
-webkit-animation-name: flowinfromright;
-webkit-animation-timing-function: ease;
-moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
}
@-moz-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
}
@-moz-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
}
@-moz-keyframes flowinfromleft {
0% { -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
}
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
}
@-moz-keyframes flowinfromright {
0% { -moz-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0); }
}

3
docs/pages/page-transitions.html
View file

@ -37,6 +37,7 @@
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
</div>
</div><!-- /grid-a -->
@ -271,7 +272,7 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="rotate">rotate</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
</div>
</div><!-- /grid-a -->