Slide transition animation breaks down with heavy enough slides

[kallehjerppe]

In certain conditions, the slide change animation "jumps back" after arriving to the next slide, repeating the animation.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The slide change animation plays once.

Current Behavior

This happens with using virtualize (at least), and creating large slides that are heavy to render.
Lets assume the overscanSlideAfter and overscanSlideBefore props are both 1.
During a slide change, there will be a brief moment, where the DOM has 4 children in the containerNode. After React settles its rendering, there are 3 children as there are supposed to be.

For example, when sliding right, the transform goes from translate(-100%, 0px); to translate(-200%, 0px);. Then, in the setIndexCurrent-method, the transform is set back to -100 (as the leftmost child is dropped out). This is set directly to the ref with this.containerNode.style.

In the end, there are 4 children, translate at -100%, and transition with animation. The browser starts animating a slide change, before the DOM is updated with removal of the leaving child slide. This behaviour can be fixed with setting this.containerNode.style.transition = 'all 0s ease 0s'; until React can do its thing.

Steps to Reproduce (for bugs)

Described above.

Context

Our project uses react-swipeable-views to show slides the size of the page, with iframes etc inside. They are pretty heavy to move then. I suppose this does not affect lighter examples.

Your Environment

Tech	Version
react-swipeable-views	v0.12.13
React	16.3.2