javascript - Cannot animate object CSS Reactjs

Question

I am an absolute beginner in web development and I really need some guidance with these tricky css animations.

I am trying to make a component in react that has two buttons("back" and "forward") and in between them you can see 4 reviews (4 divs with some data). On press of the buttons you can see the previous 4 divs respectively the next 4 divs. I have done this successfully. Now for the last few days I am working on making the reviews fadeoutleft when pressing the buttons and the new reviews to fadeinRight. I think my approach is wrong, it doesn't do anything. Has anyone done a similar component with similar animation that I can take a look on? Or do you have any suggestions about what is wrong and how can I approach this? This is my code https://codesandbox.io/s/pleasehelp-lwhmt

On lines 64/65 in Reviews.js in handleback function I have

var pastReviews = this.state.shownReviews;
var container = <div className={`${styles.pastContainer} animated fadeOutLeft w3-animate-opacity` }>{pastReviews}</div>

where I try to instantiate a new Container with current Reviews, and give it the animation of fade out. But it does not work.

question from:https://stackoverflow.com/questions/66065073/cannot-animate-object-css-reactjs

Answer 1

Waitting for answers