TransitionGroup does not remove DOM elements

[adamjedlicka]

When TransitionGroup wraps For component, removing one or more items from the array passed to the For component does not remove DOM elements.

https://stackblitz.com/edit/solidjs-templates-6yr2yt?file=src/App.tsx

In this example there is list of names. Swapping rows (up/down buttons) works and is properly animated, but removing rows (x button) does not.

[ryansolid]

Hmm.. I know why this is happening, and we could definitely document this better. Honestly, I copied Vue's implementation here which may not have been the best reference.

It comes down to, if you don't provide your own animation handlers in JS(onExit) the only way we know things are done is if there is a DOM animationend or transitionend event. So in absence of adding exit animations the elements aren't removed.

Easiest way to do it is:

.s-exit-active {
  transition: opacity 0.1s;
}
.s-exit-to {
  opacity: 0;
}

But this is non-obvious and you would think there would be opt-in. And yet this is how the Vue API works I believe.

[adamjedlicka]

Thanks, that fixed the issue. I agree that at least a mention in the documentation would be a good idea. This example you provided is enough to get the general idea.