card transition in react.js when click on prev and next button

Question

hi, how can I have a transition-changing card when I clicked on perv and the next buttons in react.js? I want to change my card with smooth transition or fade it

card image

 return (
   <article className="review">
     <div className="img-container">
       <img src={image} alt={name} className="person-img" />
       <span className="quote-icon">
         <FaQuoteRight />
       </span>
     </div>

     <h4 className="author">{name}</h4>
     <p className="job">{job}</p>
     <p className="info">{text}</p>

     <div className="button-container">
       <button className="prev-btn" onClick={prevPerson}>
         <FaChevronLeft />
       </button>
       <button className="next-btn" onClick={nextPerson}>
         <FaChevronRight />
       </button>
     </div>

     <button className="random-btn" onClick={randomPerson}>
       Random Member
     </button>
   </article>
 );
};

Answer 1

I have tried a small POC with fade effect but you can use the same logic to add other transition effect as well.

https://codesandbox.io/s/condescending-microservice-vhsvq