When triggering enter and leave animations quickly, the animation timing breaks

[hirenumradia]

Hi,

I am facing an issue with the latest version of 'velocity-react'. I have something like this (where an element is added or removed from the transition group is active):

<VelocityTransitionGroup enter={{animation: "transition.slideLeftIn", stagger: "200", duration: "400"}} leave={{animation: "transition.slideLeftOut", backwards: "150"}}> {isActive && linksHTML} </VelocityTransitionGroup>

When i trigger the enter and leave animation really quickly, there are some really wierd visual sideffects happening where the animations are transitioning and canceling properly.

I decided to go back to an older version and realised that it worked fine in version 1.1.4 but any version after that it was a problem. One of the things I noticed was that a "|| ^15.0.0" was added to "react-addons-transition-group" in package.json in versions later than 1.1.4

As this package has moved to ''react-transition-group" I suspected it was a new version of that package that was a problem. So I built the latest version of 'velocity-react' but with older versions of "react-transition-group" and found that all versions before '1.2.0' worked fine in my application.

So I decided to look at the commits made in the 'react-transition-group' repo for the '1.2.0' tag and found this commit:

reactjs/react-transition-group@b54588a

This looks like the most obvious offender out of all the pull requests merged in 1.2.0. I havn't looked into whats going on yet but thought I would share what I found.

[hirenumradia]

I have setup an example here:

If you repeatedly click the "Toggle List" button and compare the two demos, you can replicate the issue.

Velocity React 1.1.4 (Working)
https://codesandbox.io/s/5K3yjOpq

Velocity React 1.3.3 (Broken)
https://codesandbox.io/s/wp6kJgmPw

[Antho2407]

@hirenumradia Did you find a solution ? Trying to tackle the same problem

[hirenumradia]

Hey @Antho2407, I havnt had a chance to look at this yet but I can try take a look again next week. For now I am just using the older version. From taking a look at the profiles between both versions, there are a lot more events firing in the newer version, it seems to me that all the events are being processed synchronously so is causing wierd issues. Would love a second pair of eyes on it if you have time!

[Antho2407]

On my side, looks like the animation is stopped at some point, and the div is not visible then is you trigger the transitions too quickly. Tried to rollback to velocity-react 1.1.4, but didn't do the trick 😢

It feels like there is something funny happening with the Velocity.stop() calls, I'll also try to take a closer look next week

[hirenumradia]

@Antho2407 when you get some time, could you fork my code in codesandbox above and put in an example of what your tying to do? Rolling back to an older version fixed my issue, I can see if i can help with yours as well.

[Antho2407]

So when I was creating the codesandbox I realised something was being a bit funny with the way the DOM and Redux were synchronised, I fixed this issue and I had the exact same one you described 😢 Rolling back to 1.1.4 now fixed the issue

[hirenumradia]

Nice, good that you sovled the issue. 1.1.4 is stable enough for now but the issue should really be solved properly. Gonna take a look tonight to see if I can make sense of whats going on.

[fionawhim]

Is the issue here w/ velocity-react > 1.1.4 or react-transition-group >= 1.2.0?