Plugin AutoAnimate

• Instalação
• Exemplo

AutoAnimate é uma utilidade de animação sem configuração que adiciona transições suaves a qualquer aplicativo da web. Ele também funciona muito bem com o FormKit.

O FormKit não precisa de muita animação, mas uma pequena quantidade de bom gosto pode deixar claro quando os elementos aparecem e desaparecem em uma página, ou se movem — como mensagens de validação.

Instalação

Para usar o AutoAnimate com o FormKit, instale @formkit/addons:

yarn add @formkit/addons

Depois de instalar o pacote de addons, você precisará registrar o plugin AutoAnimate no 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(
      { 
        /* configuração opcional do AutoAnimate */
        // padrão:
        duration: 250,
        easing: 'ease-in-out',
        delay: 0,
      },
      { 
        /* objeto de alvos de animação opcional */
        // padrão:
        global: ['outer', 'inner'],
        form: ['form'],
        repeater: ['items'],
      }
    )
  ]
}).mount('#app')

Se você instalou corretamente, você terá transições suaves ao mostrar e ocultar mensagens de validação:

Exemplo

Isso é praticamente tudo que você precisa fazer! O AutoAnimate é projetado para ser uma utilidade de instalação zero. No entanto, se você realmente quiser ajustar um pouco mais o plugin, você pode fornecer suas próprias opções ou plugins do AutoAnimate. Leia mais sobre isso no site de documentação do AutoAnimate.