Transitions jQuery Mobile

jQuery Mobile contient des effets CSS qui vous permettent de choisir la manière dont une page s'ouvre.

Effets de transition jQuery Mobile

jQuery Mobile possède une série d'effets permettant de passer d'une page à l'autre.

Remarque :Pour implémenter des effets de transition, le navigateur doit prendre en charge les transformations 3D CSS3 :

Prise en charge du navigateur

  • Internet Explorer 10 prend en charge les transformations 3D (les versions antérieures ne le prennent pas en charge).
  • Opera ne prend pas en charge les transformations 3D.

Les effets de transition peuvent être appliqués à n'importe quel lien ou à un formulaire soumis en utilisant l'attribut data-transition :

<a href="#anylink" data-transition="slide">Passer à la page deux</a>

Le tableau suivant montre les transitions disponibles qui peuvent être utilisées avec l'attribut data-transition :

Transition Description Test
fade Par défaut. Effet d'effacement progressif et d'apparition progressive pour passer à la page suivante. Test
flip Retourner à la page suivante en sens inverse. Test
flow Lancer la page actuelle et passer à la page suivante. Test
pop Passer à la page suivante comme une fenêtre pop-up. Test
slide Glisser de droite à gauche pour passer à la page suivante. Test
slidefade Glisser de droite à gauche et apparaître progressivement sur la page suivante. Test
slideup Glisser du bas vers le haut pour passer à la page suivante. Test
slidedown Glisser du haut vers le bas pour passer à la page suivante. Test
tourner Passer à la page suivante. Test
none Pas d'effet de transition. Test

Astuce :Dans jQuery Mobile, l'effet d'effacement progressif et d'apparition progressive est par défaut sur tous les liens (si le navigateur le prend en charge).

Astuce :Toutes les effets ci-dessus sont pris en charge pour l'action inverse, par exemple, si vous souhaitez que la page glisse de gauche à droite au lieu de droite à gauche, utilisez l'attribut data-direction de valeur "reverse" . Il s'agit de la valeur par défaut sur le bouton retour.

Exemple

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

Essayez-le vous-même