Smooth animations help make a UI feel great. Using Vue's transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the transition prop.
Vuetify est possède plus de 10 animations css personnalisées qui peuvent être appliquées à de nombreux composants ou votre propre cas d'utilisation personnalisé
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Les transitions Slide x se déplacent sur l'axe horizontal.
Les animations utilisent l'application $primary-transition.
Les transitions de Scroll X se poursuivent le long de l'axe horizontal.
Les transitions de défilement Y se poursuivent le long de l'axe vertical.
De nombreux composants de Vuetify contiennent un transition prop qui vous permet de spécifier votre propre code.
An example of the fab transition can be found in the v-speed-dial component.
An example of the fade transition can be found on the Carousel component.
The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition.
Contrôlez l'origine de transition en codant avec un simple prop.
En utilisant plusieurs transitions personnalisées, il est facile d'apporter une simple liste de todo à vie!
Vous pouvez utiliser la fonction d'aide à la transition de Vuetify pour créer facilement vos propres transitions personnalisées. Cette fonction retournera un objet que vous pouvez importer dans Vue. En utilisant le composant fonctionnel vous assurez que votre transition est aussi efficace que possible. Il vous suffit d'importer la fonction :
La fonction createSimpleTransition accepte 1 argument, nom. Ce sera le nom auquel vous pourrez vous accrocher avec votre style. Ceci est un exemple de ce à quoi ressemble v-fade-transition-transition :
Prêt pour plus ? Continuez la lecture avec :