Ok, here is a workaround. Much hackier than one would like. And only works if the container’s display is flex. But does the job.
If you’re in a display: flex container, you can use the order CSS-attribute to control the order in which elements appear independent of their order in the DOM.
So you can quickly update the order of the soon-to-be-deleted element before the remove side-effect takes over to make sure it does not visually shifts (despite having been demoted one rank in the DOM order).
Updating my example above, it would look something like this:
<div class="flex">
<%= for {bla, index} <- Enum.with_index(blabla) do %>
<div
style={"order: #{2 * index};"}
phx-remove={
JS.set_attribute({"style", "order: #{2 * index - 1}"})
|> JS.transition({"ease-out duration-1000", "opacity-100", "opacity-0"},
time: 1000
)
}
>
<%= bla %>
</div >
<% end %>
</div>
If you’re using Tailwind, you could try using classes instead of relying on the style attribute: Order - Tailwind CSS. But I couldn’t make my example work with classes and preset TW classes will limit the number of elements you can include in your list (preset TW order classes currently go from order-1 to order-12).
