search

collingo / react-transition-manager

A robust transition component for React projects
http://collingo.com/react-transition-manager/
MIT License
61 stars 7 forks source link

Gap between transitioning page elements in Demo #2

Closed newjam closed 7 years ago

newjam commented 8 years ago

Great library! Works better for my purposes than Khan or React's. One thing I'm noticing in both your demo and my own tests is there is sometimes a gap between elements that are transitioning.

collingo commented 8 years ago

Thanks, glad it's been of use to you.

My use case for this never required distinct borders around the pages so the gaps were never an issue. But I can see the importance of this so will look into strategies to fix it. I'm of course open to PRs if you have the inclination :)

collingo commented 8 years ago

I have found a partial solution. On a single click the pages will animate together. This has been released to npm as v1.3.1.

The reason it is a partial solution is multiple clicks cause any partial animations to be reapplied. This means the ease-in-out transition will be reset to the full duration over the shorter distance. The easing and the short distance cause the pages to become misaligned.

This is unfortunately at this time unresolvable whilst relying on CSS transitions and I don't intend to reimplement an animation engine for this case.

If you have any other thoughts on this I'd be glad to hear.

collingo commented 7 years ago

Closing as not heard of any follow up issues