jQuery Mobile - Übergänge

Es ermöglicht das Ändern von Eigenschaftswerten, die über eine bestimmte Dauer auftreten, und ändert das Verhalten eines Elements von einem Zustand in einen anderen Zustand, indem für jeden Zustand unterschiedliche Stile angewendet werden.

In der folgenden Tabelle sind einige der im jQuery Mobile-Framework verwendeten Seitenübergänge aufgeführt.

Sr.Nr. Übergang & Beschreibung Für Seiten Für Dialoge
1

fade

Sie können Elemente ein- und ausblenden lassen.

Seite ausblenden Dialogfeld verblassen
2

flip

Klappen Sie die Elemente von hinten nach vorne auf die nächste Seite.

Seite umblättern Dialogfeld spiegeln
3

pop

Sie können ein Popup-Fenster erstellen.

Pop-Seite Pop Dialog
4

flow

Zeigen Sie die nächste Seite an, indem Sie die aktuelle Seite fernhalten.

Flow-Seite Flussdialog
5

slide

Sie können die Seite von rechts nach links verschieben.

Folienseite Schiebedialog
6

slidefade

Schiebt die Seite von rechts nach links und blendet die nächste Seite ein.

Slidefade-Seite Slidefade-Dialog
7

slideup

Schiebt die Seite von unten nach oben.

Slideup-Seite Slideup-Dialog
8

slidedown

Schiebt die Seite von oben nach unten.

Slidedown-Seite Slidedown-Dialog
9

turn

Sie können zur nächsten Seite wechseln.

Seite umblättern Dialog drehen
10

none

Mit diesem Attribut können Sie keinen Übergangseffekt verwenden.

Keine Seite Kein Dialog

Einstellen des Übergangs und der globalen Konfiguration

Standardmäßig haben Seiten fadeÜbergang im Rahmen. Sie können benutzerdefinierte Übergänge verwenden, indem Sie die hinzufügendata-transitionAttribut zum Link. Sie können verschiedene Standardübergangseffekte für die Seite verwendendefaultPageTransitionOption global. Für Dialoge können Sie verwendendefaultDialogTransition Möglichkeit.

Fallback-Übergang

Alle Übergänge unterstützen 3D-Transformationen mit Ausnahme des Überblendungsübergangs. Die Geräte, die keine 3D-Transformation unterstützen, müssen den Fade-Übergang verwenden. Einige Browser unterstützen keine 3D-Transformationen für jeden Übergangstyp, daher können Sie die verwendenfade als Standardübergang Fallback.

Max Scroll für Übergänge

Die Übergänge werden beim Scrollen von oder zu einer Seite auf "Keine" gesetzt, und die Bildlaufposition beträgt das Dreifache der Höhe des Gerätebildschirms. Manchmal reagieren Sie langsam oder der Browser stürzt ab, wenn Sie auf ein Navigationselement klicken. Um dies zu vermeiden, verwenden wir die Bildlaufposition für den Übergang mitgetMaxScrollForTransition Funktion.

Maximale Breite für Übergänge

Sie können den Übergang deaktivieren, wenn die Fensterbreite höher als die Pixelbreite ist. Sie können die maximale Breite für Übergänge mithilfe von konfigurieren$.mobile.maxTransitionWidthglobale Option, die standardmäßig auf false gesetzt ist. Es werden Werte wie Pixelbreite oder falscher Wert verwendet, und der Übergang wird auf none gesetzt, wenn es sich nicht um einen falschen Wert handelt, wenn das Fenster höher als der angegebene Wert ist.

Gleicher Seitenübergang

Sie können die Übergänge zur aktuellen Seite mit dem hinzufügen allowSamePageTransition Option für Seitencontainer-Widgets change() Methode.

Benutzerdefinierte Übergänge erstellen

Sie können die benutzerdefinierten Übergänge auf der Seite mithilfe von erstellen $.mobile.transitionHandlers Option, die die Auswahl der Übergänge auf der Website oder Anwendung erweitert.