Comments (5)
so I tried this and it worked for me, first I registered the plugin in autoAnimate.ts as you did and I did this
<script setup lang="ts">
import autoAnimate from '@formkit/auto-animate'
const ccform = ref()
const formStyles = ref({
outer: 'mb-5',
label: 'block mb-1 font-bold text-xl text-gray-500',
inner: 'w-full border-b border-gray-900 mb-1 overflow-hidden focus-within:border-ct-blue-500',
input: 'w-full bg-light-50 sofia h-10 border-none focus:outline-none text-lg text-gray-700 placeholder-gray-400',
message: 'text-xs text-red-500 font-light'
})
onMounted(() => {
ccform.value.querySelectorAll(".formkit-outer").forEach(autoAnimate)
})
</script>
<template>
<div class=" " ref="ccform">
<FormKit
type="form"
id="contact"
:actions="false"
@submit="submitForm"
>
<FormKit
type="text"
label="Name"
name="fullname"
validation="required"
:classes="formStyles"
/>
<FormKit
type="email"
label="Email"
name="email"
validation="required|email"
:classes="formStyles"
/>
<FormKit
type="tel"
label="Phone number"
:validation="[['required'], ['matches', /^[0-9]{3}[0-9]{4}[0-9]{4}$/]]"
:validation-messages="{
matches: 'Phone number must be in the format xxx-xxxx-xxxx',
}"
:classes="formStyles"
/>
<FormKit
type="submit"
label="Send"
:classes="formStylesSubmit"
/>
</FormKit>
</div>
</template>
from auto-animate.
Hello,
I have the same thing with difference of having the "genesis" theme on Nuxt 3.0.0-rc6 , but I get this error:
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}
[nuxt] [request error] MutationObserver is not defined
So I removed the plugin from formkit.config.ts and now I have this in [autoAnimate.ts] in the plugins folder:
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(autoAnimatePlugin)
})
so auto animate works when using v-auto-animate but not on the forms created using FormKit such as this example:
<script setup>
import { ref } from 'vue'
const items = ref(["😏","😐","😑","😒","😕", ... ])
function removeItem(toRemove) {
items.value = items.value.filter((item) => item !== toRemove)
}
</script>
<template>
<h5>Click emojis to remove them.</h5>
<ul v-auto-animate>
<li
v-for="item in items"
:key="item"
@click="removeItem(item)"
>
{{ item }}
</li>
</ul>
</template>
what am I missing here to make it work for FormKit forms in Nuxt 3?
thank you
from auto-animate.
Thank you for sharing you solution, I was able to use it to get my form animation to work, also I was struggling with the applying the styles to multiple elements without having to create a whole tailwind theme.
these two things I searched the docs several times but didn't find a strait forward answer, so I strongly suggest considering these be added to the docs (unless there is a more simple or elegant solution by the creators)
Thank you
from auto-animate.
Thanks for pointing this out. It is a bug in the @formkit/addons
package specifically. It needs to check for the window context before initializing itself. If you file an issue over on the https://github.com/formkit/formkit repository we can get that worked into beta.11.
from auto-animate.
I haven't files formkit.config.ts and auto-animate.ts... Could u help me?
from auto-animate.
Related Issues (20)
- Inconsistent jumping inside flex item HOT 1
- Not working HOT 4
- Vue Virtual Scroller
- Wrong arguments order in AutoAnimationPlugin declaration
- Animate across lists? Across all elements inside a `ul`?
- How should I use fixed centering layout? HOT 1
- Incorrect rounding of element sizes while animating HOT 2
- When the page is refreshed, the component has no animation.
- Vue useAutoAnimate not working with v-if
- does not provide an export named 'autoAnimate'
- Animation starting coords are buggy when the container has transitioned positions
- How to add auto-animate to custom components (NuxtUI) HOT 1
- Headless UI + Auto-Animate | Issue with auto-animate conflicting HOT 1
- nuxt3 3.10.3 does not provide an export named 'autoAnimate' HOT 1
- I added the element from the front but the animation still appears from the last one HOT 1
- React.Children.map issue HOT 1
- How to animate single element? HOT 3
- The compatibility of TR tags is a bit difficult to use, and the TR animation effect has become distorted
- CDN support ?? HOT 1
- There's no decorators for the angular imports
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auto-animate.