单击上一个和下一个按钮时 react.js 中的卡片转换

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

我尝试了一个带有淡入淡出效果的小型 POC，但您也可以使用相同的逻辑添加其他过渡效果。

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

单击上一个和下一个按钮时 react.js 中的卡片转换

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

javascript

reactjs

button

jsx

transition