AutoAnimate插件

• 安装
• 示例

AutoAnimate是一个零配置的、可直接使用的动画工具，可以为任何Web应用程序添加平滑的过渡效果。它也非常适用于FormKit。

FormKit不需要太多的动画效果，但是适量的动画效果可以清楚地显示元素在页面上的弹出和移动，比如验证消息。

安装

要在FormKit中使用AutoAnimate，需要安装@formkit/addons：

yarn add @formkit/addons

安装完插件包后，您需要在FormKit中注册AutoAnimate插件：

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(
      { 
        /* 可选的AutoAnimate配置 */
        // 默认值:
        duration: 250,
        easing: 'ease-in-out',
        delay: 0,
      },
      { 
        /* 可选的动画目标对象 */
        // 默认值:
        global: ['outer', 'inner'],
        form: ['form'],
        repeater: ['items'],
      }
    )
  ]
}).mount('#app')

如果安装正确，当显示和隐藏验证消息时，应该会有平滑的过渡效果：

示例

这基本上就是您需要做的全部！AutoAnimate旨在成为一个零配置的实用工具。但是，如果您真的想对插件进行更精细的调整，您可以提供自己的AutoAnimate选项或插件。请在AutoAnimate文档站点上阅读更多信息。