Introducing KickStart —  AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free

AutoAnimate插件

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

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

使用AutoAnimate和FormKit

1分钟

安装

要在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文档站点上阅读更多信息。