jQuery Mobile - Transitions

Il permet de modifier les valeurs de propriété qui se produisent pendant une durée spécifiée et modifie le comportement d'un élément d'un état à un autre en appliquant différents styles pour chaque état.

Le tableau suivant répertorie certaines des transitions de page utilisées dans le framework jQuery Mobile -

N ° Sr. Transition et description Pour les pages Pour les dialogues
1

fade

Vous pouvez faire en sorte que les éléments deviennent ou non visibles.

Page de fondu Boîte de dialogue Fade
2

flip

Retournez les éléments de l'arrière vers l'avant vers la page suivante.

Flip Page Boîte de dialogue Flip
3

pop

Vous pouvez créer une fenêtre contextuelle.

Page pop Boîte de dialogue pop
4

flow

Affichez la page suivante en gardant la page actuelle éloignée.

Page de flux Dialogue de flux
5

slide

Vous pouvez faire glisser la page de droite à gauche.

Page de diapositive Dialogue de diapositive
6

slidefade

Fait glisser la page de droite à gauche et s'estompe dans la page suivante.

Page Slidefade Boîte de dialogue Slidefade
sept

slideup

Fait glisser la page de bas en haut.

Page diapositive Dialogue glissé
8

slidedown

Fait glisser la page de haut en bas.

Page coulissante Boîte de dialogue coulissante
9

turn

Vous pouvez passer à la page suivante.

Tourner la page Tourner la boîte de dialogue
dix

none

Vous ne pouvez utiliser aucun effet de transition en utilisant cet attribut.

Aucune Page Aucun Dialogue

Définition de la transition et de la configuration globale

Par défaut, les pages auront fadetransition dans le cadre. Vous pouvez utiliser des transitions personnalisées en ajoutant ledata-transitionattribut au lien. Vous pouvez utiliser différents effets de transition par défaut pour la page en utilisantdefaultPageTransitionoption globalement. Pour les dialogues, vous pouvez utiliserdefaultDialogTransition option.

Transition de secours

Toutes les transitions prennent en charge les transformations 3D à l'exception de la transition de fondu. Les appareils qui ne prennent pas en charge la transformation 3D devront utiliser la transition en fondu. Certains navigateurs ne prennent pas en charge les transformations 3D pour chaque type de transition, vous pouvez donc utiliser lefade comme remplacement de transition par défaut.

Défilement maximum pour les transitions

Les transitions sont définies sur Aucune lorsque vous faites défiler depuis ou vers une page et la position de défilement sera trois fois la hauteur de l'écran de l'appareil. Parfois, vous pouvez être lent à répondre ou le navigateur peut se bloquer lorsque vous cliquez sur un élément de navigation; donc pour éviter cela, nous utilisons la position de défilement pour la transition en utilisantgetMaxScrollForTransition fonction.

Largeur maximale des transitions

Vous pouvez désactiver la transition lorsque la largeur de la fenêtre est supérieure à la largeur des pixels. Vous pouvez configurer la largeur maximale des transitions à l'aide du$.mobile.maxTransitionWidthoption globale, qui est définie sur false par défaut. Il prend des valeurs telles que la largeur de pixel ou la valeur fausse, et la transition sera définie sur aucune si ce n'est pas une valeur fausse lorsque la fenêtre est supérieure à la valeur spécifiée.

Transition de la même page

Vous pouvez ajouter les transitions à la page actuelle à l'aide du allowSamePageTransition option de widget de conteneur de page change() méthode.

Créer des transitions personnalisées

Vous pouvez créer les transitions personnalisées dans la page à l'aide du $.mobile.transitionHandlers option qui élargit la sélection des transitions sur le site Web ou l'application.