JS.hide does not apply transitions on elements that aren't hidden

[mitkins]

Environment

• Elixir version (elixir -v): Elixir 1.18.2 (compiled with Erlang/OTP 27)
• Phoenix version (mix deps): phoenix 1.7.19
• Phoenix LiveView version (mix deps): phoenix_live_view 1.0.4
• Operating system: Zorin OS 17.2 Core (debian derivative)
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome 133.0.6943.53 and Firefox 135.0 (64-bit)
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: NA

Actual behavior

I run the following code using LiveView 1.0.4:

defmodule HelloWeb.PageLive do
  use HelloWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <.button phx-click={show_slide_over()}>Open!</.button>

    <div class="hidden" id="slide-over">
      <div
        id="slide-over-overlay"
        class="fixed inset-0 z-50 transition-opacity bg-gray-900 bg-opacity-30"
      />

      <div class={[
        "w-full max-h-full max-w-sm overflow-auto bg-white shadow-lg",
        "fixed inset-0 z-50 flex overflow-hidden"
      ]}>
        <div id="slide-over-content" class="p-10 fixed left-0 inset-y-0 transform -translate-x-full">
          <div>Contents!</div>
          <.button phx-click={hide_slide_over()}>Close</.button>
        </div>
      </div>
    </div>
    """
  end

  def show_slide_over() do
    %JS{}
    |> JS.show(to: "#slide-over")
    |> JS.show(
      to: "#slide-over-overlay",
      transition: {
        "transition-all transform ease-out duration-300",
        "opacity-0",
        "opacity-100"
      }
    )
    |> JS.show(
      to: "#slide-over-content",
      transition: {
        "transition-all transform ease-out duration-300",
        "-translate-x-full",
        "translate-x-0"
      }
    )
    |> JS.add_class("overflow-hidden", to: "body")
  end

  def hide_slide_over() do
    %JS{}
    |> JS.remove_class("overflow-hidden", to: "body")
    |> JS.hide(
      to: "#slide-over-content",
      transition: {
        "transition-all transform ease-in duration-200",
        "translate-x-0",
        "-translate-x-full"
      }
    )
    |> JS.hide(
      to: "#slide-over-overlay",
      transition: {
        "transition-all transform ease-in duration-200",
        "opacity-100",
        "opacity-0"
      }
    )
    |> JS.hide(to: "#slide-over", transition: {"duration-200", "", ""})
  end
end

When I click the button to show the slide over, the smooth animation does not occur:

• #slide-over unhides
• #slide-over-overlay unhides but does not animate
• #slide-over-content does not animate onto the screen

Here's a video showing what it looks like:

LiveView.1.0.4.mp4

Expected behavior

The above code works as expected with Live View 1.0.3:

LiveView.1.0.3.mp4

More info

After some debugging, eventually I figured out that for LiveView 1.0.4 #slide-over-overlay and #slide-over-content needed the hidden utility class:

<div class="hidden" id="slide-over">
  <div
    id="slide-over-overlay"
    class="hidden fixed inset-0 z-50 transition-opacity bg-gray-900 bg-opacity-30"
  />

  <div class={[
    "w-full max-h-full max-w-sm overflow-auto bg-white shadow-lg",
    "fixed inset-0 z-50 flex overflow-hidden"
  ]}>
    <div id="slide-over-content" class="hidden p-10 fixed left-0 inset-y-0 transform -translate-x-full">
      <div>Contents!</div>
      <.button phx-click={hide_slide_over()}>Close</.button>
    </div>
  </div>
</div>

After doing this, I see the expected behaviour (as seen in the second video). Is this a bug, or should I have always had the hidden utility class set?