Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #3913 from agcolom/patch-66
Update docs/pages/page-customtransitions.html Fixes #3606
  • Loading branch information
gseguin committed Mar 25, 2012
2 parents 85bbe0b + 572383c commit 6a13b32
Showing 1 changed file with 26 additions and 22 deletions.
48 changes: 26 additions & 22 deletions docs/pages/page-customtransitions.html
Expand Up @@ -30,7 +30,8 @@ <h2>Creating custom CSS-based transitions</h2>

<p>To create a custom CSS transition, select a class name that corresponds to the name of your transition, for example "slide", and then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:</p>

<pre><code>.slide.in {
<pre><code>
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
Expand All @@ -54,25 +55,26 @@ <h2>Creating custom CSS-based transitions</h2>

<p>If your transition supports a reverse direction, you need to create CSS rules that use the <code>reverse</code> class in addition to the transition class name and the "in" and "out" classes:</p>

<pre><code>.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
<pre><code>
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromleft {
from { -webkit-transform: translateX(-100%); }
to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
</code></pre>

<p>After the CSS rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:</p>
Expand Down Expand Up @@ -123,7 +125,8 @@ <h3>Transition Handlers</h3>

<p>A transition handler is a function with the following call signature:</p>

<pre><code>function myTransitionHandler(name, reverse, $to, $from)
<pre><code>
function myTransitionHandler(name, reverse, $to, $from)
{
var deferred = new $.Deferred();

Expand All @@ -143,7 +146,8 @@ <h3>Registering and Invoking Your Transition Handler</h3>

<p>Once you have created a transition handler function, you need to tell jQuery Mobile about it. To do this, simply add your handler to the <code>$.mobile.transitionHandlers</code> dictionary. Remember, the key used should be the name of your transition. This name is also the same name that will be used within the <code>@data-transition</code> attribute of any navigation links.</p>

<pre><code>// Define your transition handler:
<pre><code>
// Define your transition handler:

function myTransitionHandler(name, reverse, $to, $from)
{
Expand Down

0 comments on commit 6a13b32

Please sign in to comment.