Sanfte Animationen sorgen dafür, dass sich die Benutzeroberfläche hervorragend anfühlt. Mit Vue-transition-System und wiederverwendbaren Funktionskomponenten können Sie die Bewegung Ihrer Anwendung ganz einfach steuern. Die meisten Komponenten können ihren Übergang durch das transitionProps verändern.
Vuetify enthält über 10 benutzerdefinierte css-Animationen, die auf zahlreiche Komponenten oder Ihren eigenen benutzerdefinierten Anwendungsfall angewendet werden können
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Slide x Übergänge bewegen sich entlang der horizontalen Achse.
Animationen verwenden $primary-transition der Anwendung.
Scroll X Übergänge folgen der horizontalen Achse.
Scroll Y-Übergänge gehen entlang der vertikalen Achse weiter.
Viele der Vuetify-Komponenten enthalten ein transition-Props, mit dem Sie Ihre eigenen definieren können.
Ein Beispiel für den Fab-Übergang finden Sie in der v-speed dial-Komponente.
Ein Beispiel für den Fade-Übergang finden Sie in der Karussell-Komponente.
Der Erweiterungs-Übergang wird in Erweiterungs-Panels und Listen-Gruppen verwendet. Es existiert auch eine horizontale Version mit v-expand-x-transition.
Programmmäßig steuern Sie den Ursprung des Übergangs mit einem einfachen Prop.
Mit mehreren benutzerdefinierten Übergängen ist es leicht, eine einfache Todo-Liste zum Leben zu erwecken!
Sie können Vuetifys Übergangs-Hilfe-Funktion verwenden, um eigene benutzerdefinierte Übergänge einfach zu erstellen. Diese Funktion gibt ein Objekt zurück, das Sie in Vue importieren können. Die Verwendung der funktionalen Komponenten-Option sorgt dafür, dass Ihr Übergang so effizient wie möglich ist. Importieren Sie einfach die Funktion:
Die createSimpleTransition-Methode nimmt ein Argument - name - entgegen. Dieses wird der Name sein, den Sie in Ihren Style einhängen können. Dies ist ein Beispiel, wie v-fade-transition ausschauen könnte:
Bereit für mehr? Weiter lesen mit: