Animate removed item out of the list

[arackaf]

Hi - wonderful library. From what I can tell it doesn't seem possible to set an animation for an item that's being removed from a list - is that true? For example, in your planets demo, if I wanted to remove Pluto, have it fly off to the left as the other planets move in to fill the space.

Would that be a feature you'd be interested in? I'd love to give it a shot if you think it's a good idea.

[jlkiri]

Sounds good! I think this is something that many need and is naturally expected to happen. It probably boils down to how an element can be animated when it is no longer rendered (= removed from DOM)

In React I would normally animate it first and then have it removed from DOM when the animation is finished with ontransitionend, but maybe there are better approaches.

[JasCodes]

Lol I was just about request the same 😂

[jlkiri]

Here's a simple example of how to achieve this with current API
(click on items to remove them)
(see fadeOut function)

https://codesandbox.io/s/list-shuffling-flip-2-iuqdr?file=/src/App.js

If an item is removed, other items already smoothly move in to fill the space. However, there are a couple of shortcomings:

• This solution forces the user to directly access DOM
• Does not animate newly added items properly for some reason

So it would be ideal to fix these two.

[arackaf]

I'll be perfectly up-front: I don't think I'll be able to get to this as quickly as I'd hoped when I opened this case. If you want to close this issue, I won't be remotely offended.

Fingers crossed some other braze soul is up for the challenge :)

[jlkiri]

@arackaf It's OK. I will try to come up with something over the weekend.

[jlkiri]

So, initially I was going to come up with some quick solution, but now I think there's room for a bigger refactor. Manipulating transitions from JS is a pain and more complex functionality will probably lead to more hacks which I want to avoid.

However, I noticed that (apart from some reported bugs) Web Animations API is enabled in all modern browsers now. I think I am going to do a rewrite that uses the animate() function and this in turn might help to add more complex interactions.

[arackaf]

@jlkiri that sounds amazing man!

[jlkiri]

It's now possible in react-easy-flip@beta with an experimental <AnimateInOut> component.

[arackaf]

Oh damn - nice!!!