Question

我有两个不错的简单CSS类，例如：

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

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

和一个包含多个部分的react类：

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

一种简单的解决方案是使用with cte as ( select name, name2, 1 as ind, value from mytable union all select name, name, ind + 1, value from cte where ind < value ) select name, name2, 1 from cte option (maxrecursion 0);，您可以为每个部分设置不同的值，以使淡入动画在不同的时间开始。

lookup

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

在ReactJS中逐一淡入节元素

1 个答案: