Unless I’m mistaken, transitions with JS functions are altogether broken except when using JS.show and maybe JS.hide.
By “broken”, I mean to say that the start and end classes are not applied at the correct times.
I could be wrong, but I’ve spent hours trying many different things to make it work without success.
Yes, seems plausible from what I’ve seen.
I can’t find an issue on Github, maybe I should open one unless someone else comes around and explains it all.
Question why do you all prefer JS.show and all the tweaks and hacks over a simple CSS-animation? Am I missing sth?
Not sure if it’s related, but the changelog shows a bugfix for js.transition: phoenix_live_view/CHANGELOG.md at main · phoenixframework/phoenix_live_view · GitHub
I’ve also come to the same conclusion. My mental model of how it should work is not overlapping with reality 
This does not do what (I think) it should with LV 0.18.15
<div :if={@show1} id="21" class="bg-red-500 opacity-20"
phx-mounted={JS.transition(
{"ease-linear duration-1000", "opacity-20", "opacity-100"},
time: 1000)}>
phoenix 1.7.0-rc.3 1.7.0-rc.3 Up-to-date
phoenix_html 3.3.0 3.3.0 Up-to-date
phoenix_live_view 0.18.15 0.18.15 Up-to-date
tailwind 0.1.10 0.1.10 Up-to-date
Hey @Sebb,
That library uses JS.dispatch.
https://github.com/benvp/live_motion/blob/main/lib/live_motion/js.ex
Is that deprecated already?
this library has its own client-side handler. While it looks very nice, its overkill. After all its working with five lines of CSS.
Yup, I went through all of the code and it seems too much.
CSS for the win.
Hopefully it will become as easy as copying an animation from animate.style and pasting it in Live View.
You’re asking why I prefer this:
<div
id={elem.id}
class="hidden"
phx-mounted={
JS.show(transition: {"ease-in duration-500", "opacity-0", "opacity-100"}, time: 500)
}
>
Hello
</div>
to this:
<style>
@keyframes fadein {
from { opacity: 0.2; }
to { opacity: 1.0; }
}
.fadein { animation: fadein 1 1000ms linear; }
</style>
<div :if={@show1} id="11" class="bg-red-500 fadein">HELLO ANIM 1</div>
?
I personally find the first solution simpler and less hacky to be honest. And in general, if I can do something without having to write any CSS, I’m happier 
OK, how is the CSS-solution hacky? (not saying that its not, just saying that I’ve no idea)