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.