在 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;

我希望这些部分中的每一个都单独淡入。截至目前，所有四个部分同时淡入。我想知道实现这一目标的最佳方法是什么。我想到的方法是将每个 id 添加到一个数组并循环遍历它们，然后应用某种线程睡眠，但我不确定这是否是最好的方法。

有人有什么建议吗？

Answer 1

一个简单的解决方案是使用animation-delay，您可以为每个部分设置不同的值，让淡入动画在不同的时间开始。

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

顺便说一句，Javascript 中没有真正的线程睡眠，因为 Javascript 是单线程的。