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是一个零配置的、可直接使用的动画工具,可以为任何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文档站点上阅读更多信息。