Achieving tailwind enter/leave transitions with LiveView.JS

Phoenix Forum Questions / Help
, , ,
7

@tcoopman Thanks for chiming in!

I was mostly having trouble with entrance transitions. (Elements not previously shown.) I had to add these to get Tailwind transitions to apply correctly:

  1. style="display: none"
  2. class="start-classes"
  3. phx-mounted={JS.show(transition: {"transition-classes", "start-classes", "end-classes"}, time: ...)}

So for example, if a TailwindUI component has:

<!--
  Entering: "ease-out duration-300"
    From: "opacity-0"
    To: "opacity-100"
-->
<div>
  ...
</div>

I had to do:

<div
  style="display: none"
  class="opacity-0"
  phx-mounted={JS.show(
    transition: {"ease-out duration-300", "opacity-0", "opacity-100"},
    time: 300
  )}
>
  ...
</div>

Without this precise configuration, I wasn’t able to get the transition to display correctly. (Notice I’m using JS.show instead of JS.transition.)

Hopefully someone out there finds this helpful! :slight_smile:

It’s worth noting that Alpine.js makes this much less confusing to get right. You just take the 3 lists of classes from the TailwindUI example HTML and drop them into 3 corresponding attributes.

<div
  x-show="open"
  x-transition:enter="ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
>
  ...
</div>

Perhaps LiveView could benefit to evolve more in that direction. :slight_smile:

4 Likes