JS.transition - does anyone have an example of a sidebar animation using the new JS commands?

shortlyportly · November 4, 2022, 6:37pm

Hi All

does anyone have an example of a sidebar animation (slide in/slide out) created using the new JS commands - specifically JS.show with a transition that slides a siderbar into view?

cheers

Dave

chrismccord · November 4, 2022, 7:50pm

There is one on the open source LiveBeats repo. Make the window width small enough to collapse the sidebar and you’ll see the menu icon animates in in/out:
https://livebeats.fly.dev/chrismccord

github.com

fly-apps/live_beats/blob/6b02cfc614aaf1f7a5ebc595c435bf62a65f5bcb/lib/live_beats_web/live/live_helpers.ex#L260-L285


      
          def show_mobile_sidebar(js \\ %JS{}) do
            js
            |> JS.show(to: "#mobile-sidebar-container", transition: "fade-in")
            |> JS.show(
              to: "#mobile-sidebar",
              display: "flex",
              time: 300,
              transition:
                {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"}
            )
            |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out")
            |> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []})
          end
          
          
def hide_mobile_sidebar(js \\ %JS{}) do
            js
            |> JS.hide(to: "#mobile-sidebar-container", transition: "fade-out")
            |> JS.hide(
              to: "#mobile-sidebar",
              time: 300,

This file has been truncated. show original

shortlyportly · November 4, 2022, 8:38pm

Perfect - many thanks Chris.