Transiciones de jQuery Mobile

jQuery Mobile incluye efectos de CSS que le permiten elegir la forma en que se abre una página.

Efectos de transición de jQuery Mobile

jQuery Mobile tiene una serie de efectos sobre cómo pasar de una página a la siguiente.

Nota:Para implementar efectos de transición, el navegador debe admitir las transformaciones 3D de CSS3:

Compatibilidad del navegador

  • Internet Explorer 10 admite las transformaciones 3D (las versiones anteriores no lo hacen).
  • Opera aún no admite las transformaciones 3D.

Los efectos de transición se pueden aplicar a cualquier enlace o a través de un envío de formulario utilizando la propiedad data-transition:

<a href="#anylink" data-transition="slide">Ir a la página dos</a>

La siguiente tabla muestra las transiciones disponibles que se pueden usar junto con la propiedad data-transition:

Transición Descripción Prueba
fade Predeterminado. Desvanecer y aparecer para ir a la siguiente página. Prueba
flip Pasar a la siguiente página deslizando desde detrás hacia adelante. Prueba
flow Proyectar la página actual, introduciendo la siguiente página. Prueba
pop Ir a la siguiente página como una ventana emergente. Prueba
slide Deslizar desde la derecha a la izquierda para ir a la siguiente página. Prueba
slidefade Deslizar desde la derecha a la izquierda y desvanecerse para ir a la siguiente página. Prueba
slideup Deslizar desde abajo hacia arriba para ir a la siguiente página. Prueba
slidedown Deslizar desde arriba hacia abajo para ir a la siguiente página. Prueba
turn Ir a la siguiente página. Prueba
none Sin efecto de transición. Prueba

Consejo:En jQuery Mobile, el efecto de desvanecimiento y aparición es predeterminado para todos los enlaces (si el navegador lo admite).

Consejo:Todos los efectos admiten la acción inversa simultáneamente, por ejemplo, si desea que la página se deslice de izquierda a derecha en lugar de de derecha a izquierda, utilice el atributo data-direction con el valor "reverse" . Es el predeterminado en el botón de retroceso.

Ejemplo

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

Prueba por su cuenta