I just want to add a fade in animation to next index. i found a package called "react transition group" but all tutorials were based on class components or redux I didn't understand anything.
const AboutTestimonials = () => {
const [index, setIndex] = useState<any>(0);
const [data] = useState(AddTestimonial);
const current = data[index];
return (
<div className="testimonials__container">
<div className="testimonials__description">
<h3>TESTIMONIALS</h3>
<p>{current.quote}</p>
<h5 className="author__testimonials">{current.postedby}</h5>
<h6 className="job__testimonials">{current.profession}</h6>
</div>
<div className="testimonials__pagination">
<Image
src={leftarrow}
alt="arrow"
onClick={() => setIndex(index > 0 ? index - 1 : index)}
className="pagination__arrows"
/>
<p>{index + 1} / 5</p>
<Image
src={rightarrow}
alt="arrow"
onClick={() => setIndex(index < 4 ? index + 1 : index)}
className="pagination__arrows"
/>
</div>
SwitchTransition
waits for the old child to exit then render the new child as mentioned in the react transition group website.there are two modes:
the important factor is changing the key prop of the child component.child component could be
CSSTransition
orTransition
.if you want the transition changes simultaneously you can use theTransitionGroup
.css: