Achieving tailwind enter/leave transitions with LiveView.JS

Questions / Help
, , ,
#1

Tailwind has nice transitions for components like slid-overs, dropdowns, and modals. For example, these are the transitions classes for a slideover:

Slide-over panel, show/hide based on slide-over state.

        Entering: "transform transition ease-in-out duration-500 sm:duration-700"
          From: "translate-x-full"
          To: "translate-x-0"
        Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
          From: "translate-x-0"
          To: "translate-x-full"

These are easy to get right with Alpine.js using x-transitions, but is there a way to do them using LiveView.JS? Has anybody tried?

3 Likes
#2

You would find an example here - live_beats/live_helpers.ex at master · fly-apps/live_beats (github.com)

You can find a practical demonstration at Client-Side Tabs in LiveView with JS Commands · Fly

4 Likes
#3

As a supplement. GitHub - petalframework/petal_components: Phoenix Live View Components has a modal component which supports transition. Check it out.

3 Likes
#4

Or the docs

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html#add_class/1

5 Likes