Animations

#summary How to use built-in animations and make your own

= Animations =

By default, jQTouch comes with 8 page animations: slide, slideup, dissolve, fade, flip, pop, swap, and cube. The links which cause these animations to occur can be customized via their corresponding initialization options (default values shown below):

• slideSelector: 'body > * > ul li a'
• slideupSelector: '.slideup'
• dissolveSelector: '.dissolve'
• fadeSelector: '.fade'
• flipSelector: '.flip'
• popSelector: '.pop'
• swapSelector: '.swap'
• cubeSelector: '.cube'
• backSelector: '.back, .cancel, .goback'

== How Animations Work ==

It is important to note that all animations are handled with CSS3 and classes. Each time the user navigates to a new page, two animations occur: The new page animating in and the old page animating out. The classes which are applied during an animation are:

• <div id="#oldpage" class="_transitionname_ out">
• <div id="#newpage" class="_transitionname_ in">

When the user hits a back button, an additional class of "reverse" is added to both elements.

== Adding Custom Animations ==

Adding your own animations is straight-forward. Just add the corresponding class definitions (using CSS3 keyframe animations), and add the animation with the corresponding public function. Here's an example of adding a custom "reveal" animation, where the new page slides in overtop of the old page.

{{{

<script> var jQT = new $.jQTouch(); $(function(){ jQT.addAnimation({ name: 'reveal', selector: '.revealme' }); }); </script> <style> .reveal.in { -webkit-animation-name: dontmove; z-index: 0; } .reveal.out { -webkit-animation-name: revealout; z-index: 10; } .reveal.out.reverse { z-index: 0; -webkit-animation-name: dontmove; } .reveal.in.reverse { z-index: 10; -webkit-animation-name: revealin; } @-webkit-keyframes revealin { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes revealout { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100%); } } </style>

}}}

You will note we're using a built-in animation "dontmove" on pages which are stationary during the transition. This is important, as it means an animation is still technically running on the object (so callback functions still work).

== Disabling Animations ==

Passing 'useAnimations: false' will disable all animations, swapping views instantly -- though still using the same selectors listed above.