Page transitions in Phoenix Liveview

<your_application>_web.ex

defp live_helpers do
  quote do
    alias Phoenix.LiveView.JS
      
    ...
      
    def transition(from, to) do
      %{
        id: Ecto.UUID.generate,
        "phx-hook": "transition",
        "data-transition-from": from,
        "data-transition-to": to
      }
    end

    ...
    
  end
end

app.js

const Hooks = {
  transition: {
    mounted() {
      this.from = this.el.getAttribute('data-transition-from').split(' ')
      this.to = this.el.getAttribute('data-transition-to').split(' ')

      this.el.classList.add(...this.from)

      setTimeout(() => {
        this.el.classList.remove(...this.from)
        this.el.classList.add(...this.to)
      }, 10)
    },
    updated() {
      this.el.classList.remove('transition')
      this.el.classList.remove(...this.from)
    }
  },
}

...

const liveSocket = new LiveSocket("/", Socket, {
  params: {
    _csrf_token: csrfToken,
  },
  hooks: Hooks
})

component.heex.html

<div class="transition duration-100 ease-out opacity-0 scale-95" {transition("opacity-0 scale-95", "opacity-100 scale-100")}>
  
  ...
  
</div>