Transição do jQuery Mobile

O jQuery Mobile inclui efeitos CSS que permitem que você escolha o modo de abertura da página.

Efeitos de transição do jQuery Mobile

O jQuery Mobile possui uma série de efeitos sobre como passar de uma página para a próxima.

Notas:Para implementar efeitos de transição, o navegador deve suportar transições 3D CSS3:

Suporte do navegador

  • O Internet Explorer 10 suporta transições 3D (versões mais antigas não suportam)
  • O Opera ainda não suporta transições 3D

O efeito de transição pode ser aplicado a qualquer link ou a um envio de formulário feito usando a propriedade data-transition:

<a href="#anylink" data-transition="slide"> Deslizar para a página dois</a>

A tabela abaixo mostra as transições disponíveis que podem ser usadas juntamente com a propriedade data-transition:

Transição Descrição Teste
fade Padrão. Entrada e saída suave para a próxima página. Teste
flip Rolar de trás para frente para a próxima página. Teste
flow Projetar a página atual, introduzir a próxima página. Teste
pop Ir para a próxima página como uma janela pop-up. Teste
slide Deslizar de direita para esquerda para a próxima página. Teste
slidefade Deslizar de direita para esquerda e suavizar para a próxima página. Teste
slideup Deslizar de baixo para cima para a próxima página. Teste
slidedown Deslizar de cima para baixo para a próxima página. Teste
virar Ir para a próxima página. Teste
none Sem efeito de transição. Teste

Dica:No jQuery Mobile, o efeito de entrada e saída suave é padrão em todos os links (se o navegador suportar).

Dica:Todos os efeitos suportam a ação reversa simultaneamente, por exemplo, se você deseja que a página deslize da esquerda para a direita em vez de da direita para a esquerda, use o atributo data-direction com valor "reverse" . O valor padrão é no botão de voltar.

Exemplo

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Deslizar</a>

Experimente você mesmo