Animating a Show More option for a list about velocity-react

[fionawhim]

I think the problem is the <div> around your OrdersList and the OrdersList itself. ReactTransitionGroup — and therefore VelocityTransitionGroup — operates only on direct children. You will need the components you’re adding / removing to be direct children of a VelocityTransitionGroup to animate them.

[tomRedox]

Hi @phopkins, thanks for the info. I got to the bottom of the issue, it was to do with Meteor; it causes a double render (one when the data is subscribed to and and another when the data actually gets to the client). That meant that the actual render order was old state -> nothing -> new state, rather than old state -> new state which I think was stopping the animation working. Splitting the component into a sub-component with a shouldComponentUpdate override that stops it rendering during the nothing phase got things working.