I’m trying to implement some TailwindUI components using LiveView and some of these specify enter / leave transitions to be implemented in JS. As an example, if you go here and view the code you’ll see comments such as:
<!--
'Solutions' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
-->
(some background on why this can’t be done with CSS alone can be found here)
Thanks, but the issue is also about the ability to change a property once the transition has completed. Here’s some further illustration from Enter & leave transitions | Sebastian De Deyne :
Broadly speaking, there are two ways to implement enter & leave transitions:
Just use the transition CSS properties
Animations with JavaScript (either by modifying CSS properties, with the web animation API, or with third-party animation libraries)
Unfortunately, transition doesn’t cut it. Here’s what we need for our dropdown list transition:
When the dropdown opens, set it’s display property to block , then set transition opacity from 0 to 1
When the dropdown closes, transition opacity from 1 to 0 , then set it’s display property to none
We can’t build this with CSS transitions alone, because there’s no way to change the display value before or after the transition happened. I don’t like JavaScript animations for these things in JavaScript either, because it couples your JavaScript to CSS and vice-versa.
This is the scenario supported explicitly by Vue, React and other frameworks.
I would also love to figure out how to do that without getting into Liveview’s hair
My initial hope was to be able to use Alpine.js, as outlined here, but Alpine and Liveview appear to be incompatible as discussed here.
Have bumped into the same article you mentioned also and been studying it over the last couple days to see if this might be the way forward. But I’m not very experienced with javascript, and it’s a bit slow going
Hoping to get it to work in conjunction with Liveview’s phx-update="ignore"…
then in the liveview mount assign more_status: "" on the socket…
and have a toggle_more:
@impl true
def handle_event("toggle_more", _query, socket) do
value = if socket.assigns.more_status == "show_more" do
"hide_more"
else
"show_more"
end
{:noreply,
socket
|> assign(results: %{}, more_status: value)}
end
most likely I would handle navbar clicks client side (do a phx-hook and addeventlistener on click) - I would also underlay the entire div - and catch clicks outside the navbar thing…
Just to help me understand: Did you mean that you would have a full screen underlay (transparent), so that if somebody clicked outside of the open menu (navbar element), you’d be able to close it again?
I’m currently using alpine.js with phx-update="ignore" - While not ideal, I don’t want to create anything more complex until a more robust solution presents itself.
There is this article about combining alpine.js with Liveview, but I didn’t find the proposed solution to work properly, and it still got wound up in Liveview updates unless you added the phx-update="ignore" property.
For simple things like menu popovers and mobile navigation hamburgers, it feels a bit complex to be wiring state to and from a Liveview. I also didn’t like the idea of having to wire up views to catch taps outside the controls, to dismiss them.
I’ll see how it goes using Liveview with a sprinkle of alpine. Ideally, it would be amazing if Liveview had alpine.js style markup for simple show/hide view transitions.
Very nice blog post! Really looking forward to the next one showing transitions with LV, AlpineJS, and Tailwind CSS.
I have been following Slack and I think Chris went over a high level near term roadmap for LV in his ElixirConf EU V 2020 video a couple weeks ago. I can’t find the video posted yet on YouTube but does anyone know if there is a plan for native LV transition support without AlpineJS? Alpine integration is great for many usecases but if simple transitions will be natively supported then it probably makes sense for me to wait and not add excess complexity for that yet. Does anyone know if the video is posted?
Fantastic write-up. Very in-depth. TBH, approaching alpine and seeing it on Tailwind website I was expecting a simple system to just manage transitions and visual appearance, but this looks much fuller. Looking forward to write-up covering show / hide and transitions. Excellent work!
