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 page turning transition.

Browse source
This commit is contained in:
Mat Marquis 2012-01-09 15:36:03 -05:00 committed by scottjehl
parent eb9e113911
commit d1663f1373
5 changed files with 94 additions and 5 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.turn.css',
'../../structure/jquery.mobile.transitions.flow.css',
'../../structure/jquery.mobile.grids.css',
'../../structure/jquery.mobile.headerfooter.css',

78
css/structure/jquery.mobile.transitions.turn.css Normal file
View file

@ -0,0 +1,78 @@
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-turn {
-webkit-perspective: 1000;
-moz-perspective: 1000;
position: absolute;
}
.turn {
-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. */
-webkit-transform-origin: 0;
-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. */
-moz-transform-origin: 0;
}
.turn.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
}
.turn.in {
-webkit-animation-name: flipintoright;
-moz-animation-name: flipintoright;
}
.turn.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
}
.turn.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); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}

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

@ -25,19 +25,19 @@
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="none">none</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="turn">turn</a>
</div>
<div class="ui-block-b">
<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>
<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 -->

1
js/index.php
View file

@ -24,6 +24,7 @@ $files = array(
'jquery.mobile.transition.slideup.js',
'jquery.mobile.transition.flip.js',
'jquery.mobile.transition.flow.js',
'jquery.mobile.transition.turn.js',
'jquery.mobile.degradeInputs.js',
'jquery.mobile.dialog.js',
'jquery.mobile.page.sections.js',

9
js/jquery.mobile.transition.turn.js Normal file
View file

@ -0,0 +1,9 @@
/*
* fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general
*/
(function( $, window, undefined ) {
$.mobile.transitionFallbacks.turn = "fade";
})( jQuery, this );