jQuery Mobile – Transições

O framework jQuery em sua versão 1.0 prevê sete efeitos de transição baseados nas funcionalidades do módulo transição das CSS3. Hoje, 28/02/2012 foi lançada a versão 1.1.0RC1 que entre outros aperfeiçoamentos criou mais dois tipos de transição denominados Turn e Flow. Transições podem ser aplicadas tanto a objetos como a páginas e são disparadas quando ocorre um evento do tipo change.
No desenvolvimento para dispositivos móveis, a aplicação mais comum de efeitos de transição é na navegação e ocorre quando o usuário clica em um link para abrir uma nova página ou clica em um botão tipo “Voltar” para retornar à página anterior. O fechamento da página atual e a abertura da nova página ocorrem segundo um efeito de transição. Ocorre também um efeito de transição no sentido inverso quando o usuário clica no botão “Voltar”. Os efeitos de transição previstos no framework são:

none

Nenhum efeito é aplicado.

slide

Efeito de deslizamento lateral da direita para a esquerda (efeito padrão).

slideup

Efeito de deslizamento de baixo para cima.

slidedown

Efeito de deslizamento de cima para baixo.

pop

Efeito de surgir por crescimento em sentido radial.

fade

Efeito de aparecer por esmaecimento do que está sobre.

flip

Efeito rotação em torno de um eixo vertical central.

turn

Efeito baseado no estilo Windows Phone Metro.

flow

Efeito tipo zoom in e zoom out.

A aplicação do efeito de transição se faz com uso do atributo data-transition, conforme esse exemplo, que demonstra os nove efeitos de transição. Esse exemplo foi criado com o desenvolvimento de duas páginas; a primeira contém nove links, todos apontando para uma janela de diálogo. Para cada link foi definido o atributo data-transition com o valor de uma transição. Na segunda página há um botão para voltar à primeira página. Abra a página exemplo em um navegador desktop que suporte transições 3D (Webkit ou Firefox) e inspecione o código fonte. Se você tem acesso a um dispositivo móvel entre no endereço http://kwz.me/bx