Animate removed item out of the list
Closed this issue · 9 comments
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.
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.
Lol I was just about request the same 😂
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.
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 :)
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.
It's now possible in react-easy-flip@beta with an experimental <AnimateInOut> component.
Oh damn - nice!!!