Comment utiliser les icônes de matériaux animés dans vuetify
Par le v-icon component de Vuetify, en utilisant le courant dominant icônes de conception de matériaux est assez simple comme:
<v-icon>home</v-icon>
Maintenant, je me demande si icônes de matériaux animés sont pris en charge et peuvent être utilisés dans Vuetify de la même manière - je veux dire sans avoir à ajouter des lignes supplémentaires de code CSS, etc. si possible.
Dans le exemples , j'ai remarqué l'utilisation de fa-spin pour Font Awesome; pourtant, il est hors de portée. Je suis lié à la bibliothèque d'icônes matérielles de Google.
EDIT: Le type spécifique de comportement dont j'ai besoin se trouve dans les exemples de vidéo dans transitions section ici: https://material.io/design/iconography/animated-icons.html# [Voyez comment un bouton play devient pause avec une animation fluide lorsque vous cliquez dessus].
La réponse courte est non. L'élément v-icon Affiche actuellement des icônes à partir d'une police Web. Les polices ne peuvent pas être animées de cette manière. Vous pouvez appliquer des animations de fondu, de rotation, d'échelle et de retournement simples pour réaliser une transition simple entre deux icônes, mais les transitions complexes auxquelles vous avez lié dans les Material Material nécessitent beaucoup plus de travail.
Ma recommandation est d'utiliser des icônes SVG en ligne qui sont disponibles à partir du jeu d'icônes officiel ainsi que du jeu d'icônes piloté par la communauté et d'animer entre ceux qui utilisent l'animation CSS, SMIL ou JavaScript .