The answer was fairly simple, no need to use ReactTransitionGroup
or ReactCSSTransitionGroup
. I simply used inline css with css3 transitions.
In the render
function, we dynamically calculate the left property. As our slides all have the same fixed width, the slides are displayed inline and only one slide is made visible thanks to overflow: hidden
on the parent element. Our dynamic class code looked like this :
var styles = {
position: "absolute",
top: 0,
left: IMG_WIDTH * (this.props.idx - this.props.activeIdx),
zIndex: 100,
transition: 'left 1s',
width: '100%'
};
Don't look at the formula too much, it's an implementation detail.
Further note, our carousel is "infinite", meaning that the transition always go one way - from left to right - even when on the first or last element. It was "just" a matter of playing with the indices of the array of content. This part was a bit harder than the carousel itself.
Side note (even troll) : even the hard part was better that doing tricky and cabalistic direct DOM manipulation since it was pure algorithms with data. No more jQuery for this stuff, and even for the rest of our website.