jQuery Mobile inclui efeitos CSS3 que lhe permite escolher a forma como uma página deve abrir.
jQuery Mobile Efeitos de Transição
jQuery Mobile tem uma variedade de efeitos de como fazer a transição de uma página para a próxima.
Nota: Para obter o efeito de transição, o navegador deve suportar CSS3 3D Transforma:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Os números na tabela especificar a primeira versão do browser que suporta totalmente transformações 3D.
O efeito de transição pode ser aplicada a qualquer link ou formulário de envio usando o atributo de transição de dados:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
A tabela abaixo mostra as transições disponíveis que podem ser utilizados com o atributo de transição de dados para ambas as páginas e diálogos:
| Transição | Descrição | para páginas | para caixas de diálogo |
|---|---|---|---|
| fade | Padrão. Desvanece-se para a próxima página | Tente | Tente |
| flip | Vira para a próxima página de trás para a frente | Tente | Tente |
| flow | Lança a página atual distância e vem com a próxima página | Tente | Tente |
| pop | Vai para a próxima página como uma janela pop-up | Tente | Tente |
| slide | Slides para a próxima página da direita para esquerda | Tente | Tente |
| slidefade | Slides da direita para a esquerda e desaparece na próxima página | Tente | Tente |
| slideup | Slides para a próxima página de baixo para cima | Tente | Tente |
| slidedown | Slides para a próxima página de cima para baixo | Tente | Tente |
| turn | Vira-se para a próxima página | Tente | Tente |
| none | Sem efeito de transição | Tente | Tente |
O efeito de esmaecimento é padrão em todas as ligações no jQuery Mobile (se o suporte ao navegador-lo).
Dica: Todos os efeitos acima também apoiar as acções reversa / trás, por exemplo, se desejar que a página para deslizar da esquerda para a direita, em vez de direita para a esquerda, utilize o atributo de direção de dados com valor "reverse" .
Exemplo
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Tente você mesmo "