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?