Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

jQuery Mobile – Transições

Publicado em: 2012-02-28 — 10.763 visualizacoes

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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

Esta matéria foi publicada em: 2012-02-28 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2012/02/28/jquery-mobile-transicoes/trackback no seu site.

7 comentários na matéria: “jQuery Mobile – Transições”

  1. Jailson CarvalhoNo Gravatar disse:

    gostei, foi muito util para min..thanks

  2. carlosNo Gravatar disse:

    usei esse efeito em meu app, só que no celular não efetua, só no navegador do desktop, tem alguma limitação?

  3. joaoNo Gravatar disse:

    valeu ai

  4. Lucas TomkielNo Gravatar disse:

    Grande Maujor, estava estudando sobre alguns efeitos do jQuery Mobile, foi muito útil essa postagem
    Parabéns!

  5. DianaNo Gravatar disse:

    Tenho muita curiosidade, mas também muita dificuldade em começar a perceber.

  6. DianaNo Gravatar disse:

    Tenho aprendido muito de jQuery. Espero que o site continue para sempre

  7. Carlos FructuosoNo Gravatar disse:

    Show de bola, parabéns e obrigado.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo