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

【问题标题】：card transition in react.js when click on prev and next button单击上一个和下一个按钮时 react.js 中的卡片转换
【发布时间】：2021-06-22 00:31:36
【问题描述】：

你好，当我点击 react.js 中的 perv 和 next 按钮时，如何获得转换转换卡？我想通过平滑过渡或淡化来更改我的卡片

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>
 );
};

【问题讨论】：

标签： javascript reactjs button jsx transition

【解决方案1】：

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

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

【讨论】：