AutoAnimate est un utilitaire d'animation sans configuration, prêt à l'emploi, qui ajoute des transitions fluides à n'importe quelle application web. Il fonctionne également très bien avec FormKit.
FormKit n'a pas besoin de beaucoup d'animation, mais une petite quantité de bon goût peut rendre clair lorsque des éléments apparaissent et disparaissent d'une page, ou se déplacent - comme les messages de validation.
Pour utiliser AutoAnimate avec FormKit, installez @formkit/addons :
yarn add @formkit/addons
Une fois que vous avez installé le package addons, vous devrez enregistrer le plugin AutoAnimate avec FormKit :
import { createApp } from 'vue'
import App from 'App.vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import { plugin, defaultConfig } from '@formkit/vue'
createApp(App).use(plugin, defaultConfig({
plugins: [
createAutoAnimatePlugin(
{
/* configuration AutoAnimate optionnelle */
// par défaut :
duration: 250,
easing: 'ease-in-out',
delay: 0,
},
{
/* objet cibles d'animation optionnel */
// par défaut :
global: ['outer', 'inner'],
form: ['form'],
repeater: ['items'],
}
)
]
}).mount('#app')
Si vous l'avez correctement installé, vous devriez avoir des transitions fluides lors de l'affichage et de la dissimulation des messages de validation :
C'est à peu près tout ce que vous avez à faire ! AutoAnimate est conçu pour être un utilitaire prêt à l'emploi sans configuration. Cependant, si vous voulez vraiment affiner un peu plus le plugin, vous pouvez fournir vos propres options ou plugins AutoAnimate. Pour en savoir plus à ce sujet, consultez le site de documentation AutoAnimate.