Using Animate.css with x-transition #489
Replies: 4 comments 6 replies
-
Hi @cjmellor, The Have you got a CodePen or similar with your Alpine component? |
Beta Was this translation helpful? Give feedback.
-
Played about loads with this last night and I got working some form of toggle which works, and it's not using the Here's the CodePen if you want to take a look. Interested to know if anyone could improve on this or clean up the code? |
Beta Was this translation helpful? Give feedback.
-
Hi guys, I had a look last week and it turned out Alpine doesn't fully support css animations only transitions. Animate css uses animation (so it has a animation-duration property) but Alpine ignores it when running the transition code (which consists in adding and removing classes based on certain timeouts). TL;DR This line https://github.com/alpinejs/alpine/blob/master/src/utils.js#L361 should also take into consideration The neatest workaround I found so far is to add a css class setting a transition-length (see https://codepen.io/SimoTod/pen/pojOqWG where I use duration-1000 from tailwind). I hope it helps. |
Beta Was this translation helpful? Give feedback.
-
Hi @calebporzio Based on the above, could the ability to use libraries like Animate.css be implemented into Alpine the same way Vue.JS allows it? 🤞 |
Beta Was this translation helpful? Give feedback.
-
Hi,
Is it possible to use a library like Animate.css in the
x-transition
properties?I'm using a plugin called tailwindcss_animatecss which gives you new utilities like
animate__animated animate__slideInUp
I tried to use Vue JS's Docs as a starting point as they have an example here using animate.css but I coudn't translate it well :(
Any guidance would be appreciated 😃
Beta Was this translation helpful? Give feedback.
All reactions