LiveView show/hide animation/transition

Phoenix Forum Questions / Help
,
1

There is a LiveView component, which displays multiple elements/widgets, presence of which are determined by a list in an assign. When I remove an element from the assign list, the corresponding widget disappears as expected. Now what is the suggested method of adding an animation/transition to such removal? Something like a combined scale-down and fade-out for example…

1 Like
2

phx-remove in the bindings for DOM patching is meant for this kind of use cases

1 Like
3

So based on this example I add phx-remove={JS.hide(%JS{}, transition: "fade-out-scale", to: "##{@widget_id}")}. This gives me:

phx-remove="[["hide",{"time":200,"to":"#top_sellers","transition":[["fade-out-scale"],[],[]]}]]"

in the markup, and… I see no transition. When I do exactly as in the example (with separate function) the same. I can increase the time and I see increased delay before the element disappears so at least this part works. Anything I am badly missing or should keep i mind while doing this?

Edit: Are those transitions predefined or does one have to define them herself?

4

This example using tailwind classes only works fine for me:

<button phx-click="toggle-show-assign">show or hide</button>
<div
      :if={@show}
      class="hidden"
      phx-remove={
        JS.hide(transition: {"ease-out duration-1000", "opacity-100", "opacity-0"}, time: 1000)
      }
      phx-mounted={
        JS.show(transition: {"ease-in duration-1000", "opacity-0", "opacity-100"}, time: 1000)
      }
    >
      I fade in or out when you click the button
</div>
1 Like
5

OK - apparently those are only “example transition CSS class names” which are added when the removal is triggered. This means one has to define those classes first. Something like:

/* TRANSITIONS */
@keyframes fade-out-scale {
	100% {
		transform: scale(0.4);
		opacity: 0;
	}
}

.fade-out-scale {
	opacity: 1;
	animation: fade-out-scale .2s ease-in;
	animation-fill-mode: forwards;
}

does the trick for the example above.

6

Phoenix generators create a css file with those classes (at least they used to when I created my project).

But yeah, I prefer using the native tailwind classes as shown above. I hate writing CSS :slight_smile:

1 Like
7

Ah, might be. I surely removed those original phx CSS files long time ago :slight_smile: