- First of all you don't need
-done variations,
- Your css only handles the the animation when you click the next button (enters from right, exits from left), therefore you also need the opposite of that:
CSS:
.right-to-left-enter {
transform: translateX(100%);
}
.right-to-left-enter-active {
transform: translateX(0);
transition:all 1s ease;
}
.right-to-left-exit {
transform: translateX(0);
}
.right-to-left-exit-active {
transform: translateX(-100%);
transition:all 1s ease;
}
.left-to-right-enter {
transform: translateX(-100%);
}
.left-to-right-enter-active {
transform: translateX(0);
transition:all 1s ease;
}
.left-to-right-exit {
transform: translateX(0);
}
.left-to-right-exit-active {
transform: translateX(100%);
transition:all 1s ease;
}
You need TransitionGroup and CSSTransition for the sliding animation you want. However there is one thing to note:
Once a CSSTransition is mounted, you can not alter the exit animation even if you change the classNames property on the go. But there is a property called childFactory of TransitionGroup component which gives you the ability yo change the mounted CSSTransition component's properties.
Here is the code you need:
const [isNext, setIsNext] = useState(true);
const onNext = () => setIsNext(true);
const onPrevious = () => setIsNext(false);
return (
<TransitionGroup childFactory={child => React.cloneElement(child, { classNames: isNext ? "right-to-left" : "left-to-right", timeout: 1000 })}>
<CSSTransition key={key} classNames="right-to-left" timeout={1000}>
// Put your sliding content here. Change the key as the content changes.
// The value of the key is unimportant
</CSSTransition>
</TransitionGroup>
);
Do not forget to use absolute positioning on sliding content
