How to animate component unmount in liveview using tailwind?

Questions / Help
,
1

I’m using liveview with various components in a single parent liveview.

Here’s an example:

<%= case @action  do %>
	<% :index -> %> <.live_component id="home-component" module={BattleshipWeb.GameLive.HomeComponent} player_count={@player_count} />
	<% :edit -> %> <.live_component id="edit-component" module={BattleshipWeb.GameLive.EditComponent} gameboard={@gameboard} />
	<% :play -> %> <.live_component id="play-component" module={BattleshipWeb.GameLive.PlayComponent} gameboard={@gameboard} enemy_gameboard={@enemy_gameboard} has_won={@has_won} winner={@winner} />
<% end %>

In each of these components, I have a button which basically changes the action through an event.

I was able to successfully animate when a component mounts, by putting class="animate-fade-in" in each component parent div.

However, I wasn’t able to animate when a component unmounts.

I tried using JS.hide(to: "#home-component", transition: "animate-fade-out") on button click for each component, without any success.

Is there a way to animate component unmount?

1 Like
2

Update: Animating through CSS is possible. For example, in my CSS file:

.fade-out { .... }

I was able to just do JS.hide(to: "#home-component", transition: "fade-out"), and the animation ran successfully.

So the culprit was using tailwind classes in transition option. Is there any way to just use tailwind classes?

3

Another update:

I had to use a “hacky” way to use tailwind classes.

In my CSS file, I used tailwind’s @apply directive to apply the animation classes.

.fade-out {
  @apply animate-fade-out;
}

and using JS.hide(to: "#home-component", transition: "fade-out"), everything worked!