jQuery Mobile - Transiciones
Permite cambiar los valores de propiedad que ocurren durante una duración especificada y altera el comportamiento de un elemento de un estado a otro mediante la aplicación de diferentes estilos para cada estado.
La siguiente tabla enumera algunas de las transiciones de página utilizadas en el marco jQuery Mobile:
| No Señor. | Transición y descripción | Para páginas | Para diálogos |
|---|---|---|---|
| 1 | fade Puede hacer que los elementos aparezcan y desaparezcan de la visibilidad. |
Página de fundido | Diálogo de fundido |
| 2 | flip Voltea los elementos de atrás hacia adelante a la página siguiente. |
Voltear página | Diálogo Flip |
| 3 | pop Puede crear una ventana emergente. |
Página emergente | Diálogo Pop |
| 4 | flow Muestre la página siguiente manteniendo la página actual ausente. |
Página de flujo | Diálogo de flujo |
| 5 | slide Puede deslizar la página de derecha a izquierda. |
Página de diapositivas | Dialogo de diapositivas |
| 6 | slidefade Desliza la página de derecha a izquierda y se desvanece en la página siguiente. |
Página Slidefade | Diálogo Slidefade |
| 7 | slideup Desliza la página de abajo hacia arriba. |
Página deslizante | Diálogo deslizante |
| 8 | slidedown Desliza la página de arriba a abajo. |
Página deslizable | Diálogo deslizante |
| 9 | turn Puede pasar a la página siguiente. |
Pasar página | Diálogo de giro |
| 10 | none No puede utilizar ningún efecto de transición utilizando este atributo. |
Ninguna página | Diálogo Ninguno |
Establecer la transición y la configuración global
De forma predeterminada, las páginas tendrán fadetransición en el marco. Puede usar transiciones personalizadas agregando eldata-transitionatributo al enlace. Puede usar diferentes efectos de transición predeterminados para la página usandodefaultPageTransitionopción a nivel mundial. Para los diálogos, puede hacer uso dedefaultDialogTransition opción.
Transición alternativa
Todas las transiciones admiten transformaciones 3D excepto la transición de fundido. Los dispositivos que no admitan la transformación 3D, deberán hacer uso de la transición de desvanecimiento. Algunos navegadores no admiten transformaciones 3D para cada tipo de transición, por lo que puede utilizar lafade como alternativa de transición predeterminada.
Desplazamiento máximo para transiciones
Las transiciones se establecen en ninguna cuando se desplaza desde o hacia una página y la posición de desplazamiento será tres veces la altura de la pantalla del dispositivo. A veces, es posible que responda con lentitud o que el navegador se bloquee al hacer clic en cualquier elemento de navegación; así que para evitar esto estamos usando la posición de desplazamiento para la transición usandogetMaxScrollForTransition función.
Ancho máximo para transiciones
Puede deshabilitar la transición cuando el ancho de la ventana es mayor que el ancho del píxel. Puede configurar el ancho máximo para las transiciones usando el$.mobile.maxTransitionWidthopción global, que se establece en false de forma predeterminada. Toma valores como el ancho de píxel o el valor falso, y la transición se establecerá en ninguna si no es un valor falso cuando la ventana es mayor que el valor especificado.
Transición a la misma página
Puede agregar las transiciones a la página actual usando el allowSamePageTransition opción de widget de contenedor de página change() método.
Crear transiciones personalizadas
Puede crear las transiciones personalizadas en la página utilizando el $.mobile.transitionHandlers opción que amplía la selección de transiciones en el sitio web o la aplicación.