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?