Исчезать в элементах раздела один за другим в ReactJS

Question

У меня есть два хороших простых класса CSS, таких как:

.testimonial-body {
    -webkit-animation: fadein 3s;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

и класс реагирования, который содержит несколько разделов:

class Testimonials extends React.Component {
    render() {
        return (
            <div> 
                <h2>See what people are saying...</h2>
                <section className="testimonial-body" id="doug_and_sue">
                    <p>"Dependable, trustworthy, and expert workmanship all 
                        describe Kevin and his business.  
                        He completely transformed our condo, painting it from top to 
                        bottom, among other projects.
                        Not only does he do excellent work, but he's a 
                        pleasure to have in your home. For any future projects, 
                        there's no one we'd rather have than Kevin." 
                        <span class="testimonial-signature"> - Doug and Sue &sdot; Brookfield, WI</span>
                    </p>
                    <Gallery images={doug_and_sue_images} 
                                backdropClosesModal={true}
                                enableKeyboardInput={true}
                                enableImageSelection={false}/>
                </section>
                <section className="testimonial-body" id="section2">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
                <section className="testimonial-body" id="section3">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
                <section className="testimonial-body" id="section4">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
            </div>
        );
    }
}

export default Testimonials;

Я бы хотел, чтобы каждый из этих разделов исчезалв индивидуальном порядке.На данный момент все четыре секции исчезают одновременно.Мне интересно, как лучше всего это сделать.Я подумал о том, чтобы сделать это, добавив каждый из идентификаторов в массив и перебрав их, а затем применив какой-то поток сна, но я не уверен, что это лучший способ сделать это.

У кого-нибудь есть предложения?

Answer 1

Простым решением является использование animation-delay, вы можете иметь разные значения для каждого из ваших разделов, чтобы анимированная анимация начиналась в разное время.

https://www.w3schools.com/csSref/css3_pr_animation-delay.asp

Кстати, в Javascript нет по-настоящему спящего потока, поскольку Javascript является однопоточным.