How would you deal with this situation ? about velocity-react

[fionawhim]

After thinking about this a little, I'd recommend trying to subclass
VelocityTransitionGroup. If you mark your nodes in some manner with whether
they should be animated or not (with classes, perhaps?) you can override
childWillAppear, childWillEnter, and childWillLeave. Use your own logic to
short-circuit out of those functions (just call the doneFn and return) and
only call the "super" implementations when you want animation to happen.

You could also put together a PR to allow the wrapper component class,
currently VelocityTransitionGroupChild, to be parameterized as a prop to
VelocityTransitionGroup. Then you could implement the logic in your custom
child's componentWillAppear / componentWillEnter / componentWillLeave
(calling the willAppearFunc / willEnterFunc / willLeaveFunc props as
necessary).

I think the latter's nicer because I prefer composition over inheritance
for customization (esp. given the state of JS "classes"), but the former
you could get started on right away.

On Tue, Dec 8, 2015 at 11:08 PM, Richard Lopes [email protected]
wrote:

Hello,

Having great success with the library so far.
However I got a new requirement causing me some grief to achieve.

I have 2 pages:

• a list of items (that you can sort and filter)
• a form to create new items

I have 2 API endpoints:

• one gets the original list of items
• one returns new items that have been added by other users

This is how it works:

1. when the list of items first load, items are rendered without animation
2. when you filter or sort the list, items are rendered without animation
3. when the second API notify new items have been added, those are
   rendered in the list with animation
4. when an item is deleted, it gets removed with an animation
5. when a user leave the list page to create an item on the second page,
   he is redirected back to the list page after creation, the new item only
   must be rendered with animation

At the moment I achieve 1 to 4 but I am having problems with 5 (5 leaves
the list page then come back, unmount/mount items). If I turn on animation
(on mount) all items are animated as no item was (React) mounted yet. If
animation is turned off nothing gets animated including the new item.

For animation I wrap the list of items inside a VelocityTransitionGroup
and each item as a key attribute set to the item unique id. The unique id
works well to filter out what gets animated but in the case of 5 it doesn't
help.

I have hacks in mind but they are not elegant. What would be the best
approach to meet requirements 1 to 5 ?

I am thinking replacing the transition group with a VelocityElement per
row/item for finer control but I am not sure how to achieve the enter,
leave effect as provided by the transition group. Also feels like
reinventing transition group in a way.

—
Reply to this email directly or view it on GitHub
#58.

[richard-lopes]

Thanks for taking the time to answer this.
This is a bit more involved than I would have hoped but I will take your advice and fork the project. I think your option 2 will be better indeed. I also believe composition is a better approach.
My immediate objective is to have it working in my context but when I get a minute I can clean things up and submit a PR.
I keep you posted here.

[richard-lopes]

I am going to address this now that I am back from 1 month holiday.