React-motion: TransitionMotion animated conditionally [question]

Created on 1 Sep 2016 · 3Comments · Source: chenglou/react-motion

Hello everyone. I've been playing around with react-motion for the last couple of days and it's been a pretty intensive relation so far 😭 . I'd very much appreciate some guidance on when to use Motion vs TransitionMotion or why my use case, which I believe is quite common, is giving me this much struggle.

First, let me explain what I am trying to achieve. My use case is a pane that appears from the right with information about a point on a map that you just clicked. What I want to _conditionally_ animate is the enter animation, so that when you click on another point in the map and the pane is already in place it won't animate from the beginning again.

I'm new to the library and went ahead and started using TransitionMotion because my use case seemed to apply to the _Helps you to do mounting and unmounting animation_ premise.

I thought onRest would allow me to set a shouldAnimate flag in my component's inner state when the enter animation finishes so it happens only once, but since it is implemented in Motion and not in TransitionMotion I got kind of lost. Why is it not implemented? Is it not necessary because there is already a way to do this?

Mainly I'm wondering if I should be using Motion instead just because of that feature. But I'm not sure 😁 and the difference between the two is still blurry to me. Hopefully someone can point me in the right direction.

Thanks for your time 👋

Source

p4bloch

Most helpful comment

Hi, have you tried using the same key in the styles array? Because if you use the same key, TransitionMotion will asume that it is the same object, and therefore it will not animate it. If the keys are different, it will animate out the old element (which is the one that it is no longer there), and animate in the new element.

I hope this is works for you!