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

Broke out the global and in and out transition rules for asymmetric timing

Browse source 
Also added duplicate buttons at the booth to test scroll position
smoothness.
This commit is contained in:
toddparker 2012-01-02 13:41:45 -05:00 committed by scottjehl
parent 920738c8b9
commit d39fb83ec4
2 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,17 @@
/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/
Built by David Kaneda and maintained by Jonathan Stark.
*/
.in, .out {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 350ms;
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 325ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 325ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 250ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
}
@ -344,8 +350,8 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
.pop.out.reverse {
-webkit-transform: scale(.2);
-moz-transform: scale(.2);
-webkit-transform: scale(0);
-moz-transform: scale(0);
opacity: 0;
-webkit-animation-name: popout;
-moz-animation-name: popout;
@ -354,7 +360,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
@-webkit-keyframes popin {
from {
-webkit-transform: scale(.2);
-webkit-transform: scale(0);
opacity: 0;
}
to {
@ -364,7 +370,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
}
@-moz-keyframes popin {
from {
-moz-transform: scale(.2);
-moz-transform: scale(0);
opacity: 0;
}
to {
@ -379,7 +385,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
opacity: 1;
}
to {
-webkit-transform: scale(.2);
-webkit-transform: scale(0);
opacity: 0;
}
}
@ -389,7 +395,7 @@ Built by David Kaneda and maintained by Jonathan Stark.
opacity: 1;
}
to {
-moz-transform: scale(.2);
-moz-transform: scale(0);
opacity: 0;
}
}

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

@ -248,6 +248,20 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;
<p>Once you do this, your handler will be invoked any time a transition name is used but not found within the <code>$.mobile.transitionHandlers</code> dictionary.</p>
<h2>Transitions and scroll position</h2>
<p>One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.</p>
<div class="ui-grid-a">
<div class="ui-block-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>
</div>
<div class="ui-block-b">
<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="fade">fade</a>
<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip*</a>
</div>
</div><!-- /grid-a -->
</div><!--/content-primary -->