Using Animate.css with x-transition

[cjmellor]

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 :(

    <div class="fixed inset-0 h-screen bg-black p-8"
         x-show="loginOverlay"
         x-transition:enter-start="animate__animated animate__slideInUp"
         x-transition:leave-start="animate__animated animate__slideOutDown"
    > ... </div>

1. Is this even possible using such utilities from a library
2. Is this the best method to achieve the result I want, or should I use something like class binding?

Any guidance would be appreciated 😃

[ryangjchandler]

Hi @cjmellor,

The x-transition directives will simply add and remove those classes from your component / element at those specific points in time, so in reality you can use any class for the animations.

Have you got a CodePen or similar with your Alpine component?

[cjmellor]

Hi @ryangjchandler

Yes, I have just whipped this up

https://codepen.io/cmellor/pen/RwWYgpN?editors=1000

I just put the transitions used in the Alpine docs in there. Honestly, I've tried tons of different combos in these properties and I can't make the animation I want work. I suspect I just aren't understanding this correctly, so I'm eager to learn how it's done correctly, if that makes sense?

[cjmellor]

Played about loads with this last night and I got working some form of toggle which works, and it's not using the x-transition properties.

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?

[ryangjchandler]

The first thing I noticed was the use of 2 separate properties for the open state. You could just use a single property and check whether it is truthy or falsy.

[cjmellor]

Yeah, that bothered me too and I knew it was the wrong way of doing things

Check this alteration and I aren't using 2 properties here, just the one (truthy/falsy). The only thing with this that I can't wrap my head around is the slideOutDown class doesn't run when I click the X Close button, which makes the loginOverlayOpen prop = false - it works fine when it's set to true

Any ideas where I might be going wrong?

[SimoTod]

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 getComputedStyle(el).animationDuration to support animate.css without tricks.

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).
The only weak point is that you have to make sure you pick the right class matching the animation length (1s in this case).

I hope it helps.

[cjmellor]

Hey! Yep, this works how I wanted it to - I would have never thought to use duration but then again I'm not familiar with the backend of Alpine.

It sounds like adding support for Animations should be simple though, do you think it could be added? Not something I could PR myself due to lack of understanding, but maybe I could raise an issue and bring it to attention?

BTW @SimoTod thanks for your help!

[SimoTod]

I think it should be added. Other frameworks like vue support it and without looking at the code, i would have thought Alpine did it as well since it's just a css class.

[cjmellor]

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?

🤞

[SimoTod]

I've sent a PR, let's see how it goes.
#498