CSS transisions with Phoenix.LiveView.JS

Phoenix Forum Questions / Help
,
1

Hi!

I am pretty excited about the new JS commands in LiveView, but struggling to replace AlpineJS in the transitions department.

Looking at the following markup:

<div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
    >Hello 👋</div>

(from transition — Alpine.js)

How would I do this with LiveView.JS? Been playing around trying to pass different arguments to transision/3 and co but haven’t been able to get anything that resembles what Alpine does.

Has anyone looked into it and could provide an example?

1 Like
2

:eyes:

I’ve been playing around with this. I’ll let you know if I have any interesting learnings to share.

1 Like
3

You should take a look at Chris McCords Keynote (You can find the source code of the JS demo here).

1 Like
4

LiveView 0.17.3 supports a 3-tuple for the :transition option which will apply the transition class, with a starting and ending class, for example:

  def show_modal(js \\ %JS{}, id) do
    js
    |> JS.show(
      to: "##{id}",
      display: "inline-block",
      transition: {"ease-out duration-300", "opacity-0", "opacity-100"}
    )
    |> JS.show(
      to: "##{id}-content",
      display: "inline-block",
      transition:
        {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
         "opacity-100 translate-y-0 sm:scale-100"}
    )
  end
18 Likes
5

That works like an absolute treat. Thank you so much for making this happen :heart:

1 Like