Animating react table rows when documents are added or removed

help
1

Hey all,

I’m trying to add some nice animations to my meteor/react/v4-material-ui app.

I’d like to animate appearance and removal of documents (some accordion style flip) in my collections, which are rendered as rows in a table and get synced via useTracker from my meteor server.

What i tried so far:

  • react-flip-move which is awesome for lists and grids, but fails on tables.

  • Also tried using hooks like in this CodeSandbox to control whats going on during mount and unmount of the react components, which fails due to the fact that the unmount-hook not gets called once a document is removed on server side

  • Tried to get control on added and removed items observing the corresponding cursors, which might work out if documents get added (though I can’t find an efficient way on getting only new items), but if removed I really can’t figure out how to prevent populating the new data via useTracker (and hence directly removing all items before any animation can begin)

The last two tries make me think that this is meteor specific and not solely on reacts side. Also checked more google and forum entries, but most recent ones covering that topic (aside from react) are like more than 5 years old, so…

Any ideas highly appreciated.

2

Hi @bratelefant, I just installed react-flip-move in a sample Meteor project and it worked fine.

You can check out the repository here, test the demo and also see the last two commits where I made the changes to implement it.

One thing I did wrong the first time was trying to use a stateless functional component. But you can see here that it doesn’t work without a React.forwardRef, as the author of the package states here. In my case, I used a class component.

1 Like
3

hi @fredmaiaarantes , if I got it right, in your project your children seem to be basically divs (Boxes etc); in this setting I also get this to work.

My point is that I want to use it on <tr>'s, and I’m running into similar problems like in this post on stackoverflow. By wrapping into divs it messes up the table cell spacing.

Also, I use pagination and a search filter, and I don’t want to animate changes coming from that filter(...).map … (hope you understand what I mean); Only db changes should be animated.