search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

Disable enter animations on a per child basis? #186

Closed Pajn closed 7 years ago

Pajn commented 7 years ago

Hello!

I'm trying to combine flip-move with hero transitions so that elements from other parts of the app transitions nicely into the list. This works splendid if I disable enter animations on react-flip-move but I do also have a few cases where items directly appear in the list and while I could solve that from the outside it would be nice to be able to take advantage of flip moves already great support for these.

I don't know exactly how this would be implemented though. Maybe a CSS selector that only does enter animations on matching items?

joshwcomeau commented 7 years ago

So, one potentially simple solution: FlipMove will not animate any children that don't have a key prop. It ignores them during shuffle animations as well as enter/leave.

If that fails, I think the solution would be adding a prop to the children, that FlipMove could look for. I wouldn't want that functionality merged in (since it seems like a fairly substantial bit of added complexity for a pretty rare usecase), but it definitely seems doable, so I'd encourage you to fork it and give it a shot :)

But yeah, hopefully the key approach works!

Pajn commented 7 years ago

I see your point, I just wanted to bring it up and see what you thought.