How to use `animate-out`?

[brunobely]

Should I be somehow hiding the element myself or does tw-animate-css do that for me? Based on the advanced usage example in the readme I didn't think I needed to hide it:

<div
  class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500"
  data-state="show"
>

But when I do that the div stays on screen, is that supposed to happen? If I add data-[state=hide]:hidden then it doesn't animate out as it hides before it has time to animate.

Tailwind Playground

[Wombosvideo]

Hey there, you can just add fill-mode-forwards to your elements and it should work as expected. Tell me if it works for you.

Also, sorry for the late response.

[brunobely]

Oh, awesome, thanks for the example, that solves it.

Related but not the same question: if an element needs to stop taking up space on the page after animating out (i.e., setting it to display: none;), is there a way to wait for the out animation to end before doing so, or is that beyond the scope of what we can do with CSS/Tailwind animations?

[nowlena]

I was looking for something similar ... I'm trying to have on animation end opacity: 0; and visibility: hidden;.

• I'm working on a navigation sub-menu that should remain mounted on page at all times but just animated in/out from view

It does look like fill-mode-forwards is properly setting the animation end opacity to 0.