CSS animation when adding new elements to the DOM

Phoenix Forum Questions / Help
3

I’m having some trouble with that.
I think I have to match the transition-duration property value to the time option. (the docs don’t do that, but I do not see how else this should work). OK I did that. Also in class I set the same opacity as in the start-slot of the 3-tuple, otherwise the element appears-vanishes-appears. But still I do not get a smooth transition, it just pops up.

<div
  :if={@show1}
  phx-mounted={
    JS.transition({"ease-out duration-1000", "opacity-20", "opacity-100"}, time: 1000)
  }
  class="bg-red-500 opacity-20"
>

There is a solution with JS.show here: Achieving tailwind enter/leave transitions with LiveView.JS - #7 by paulstatezny

<div
  :if={@show1}
  style="display: none"
  phx-mounted={
    JS.show(
      transition: {"ease-linear duration-1000", "opacity-20", "opacity-100"},
      time: 1000
    )
  }
  class="opacity-20 bg-red-500"
>

:face_with_monocle: