React-awesome-reveal 没有出现在滚动条上答案

【问题标题】：React-awesome-reveal not appearing on scrollReact-awesome-reveal 没有出现在滚动条上
【发布时间】：2022-11-03 18:55:28
【问题描述】：

所以我在一个网站上工作，我希望内容随着用户滚动而淡入。我已经查看了多种选择，但与其他选择斗争，所以尝试了 react-awesome-reveal（如果你知道一个简单的选择，我会愿意尝试）。

所以目前当我打开我的主页选项卡时，第一个标题正确地进行了转换，但是当你向下滚动时其他元素已经加载。我还尝试使用级联将所有元素放入 1 Fade 组件中，但这也不起作用。

我的代码的 sn-p 如下：

import { Fade} from "react-awesome-reveal";
import SliderItem from './SliderItem'

（这是在返回部分内）

 <Fade direction='up' casecade triggerOnce='true' duration={2000}>
              <div className='first-header original'>
                  <h1>LET'S GET <div className="physical">PHYSICAL.</div></h1>
                  <div className='headerImg'>
                      <img src={headerImg}></img>
                  </div>
              </div>
      </Fade>       
   
              <Fade direction='up' casecade triggerOnce='true'>
                <div className='second-header'>
                    <video autoPlay loop muted playsInline className='backVideo'>
                        <source src={video}/>
                    </video>
                    
                    <div className='content'>
                      <h1 class="text2">#GetShopping</h1>
                      <img className='second-scribble' src={scribble2}/>
                    </div>
                </div>
              </Fade> 
             

              
              <Fade direction='up' casecade triggerOnce='true'>
                <div className='third-header'>
                    <Carousel>
                            {products}
                    </Carousel> 
                </div>
              </Fade>

            

              <Fade direction='up' casecade triggerOnce='true'>
                <div className='info-header'>

                    <div className='content-img'>
                        <img src={skateGirl}></img>
                    </div>
            
                    <div className='content-text'>
                    <img className='third-scribble' src={scribble3}/>
                        <small>SKY SKATES IS FOR EVERYONE</small>
                        <h2>Join the Squad</h2>
                        <p>Sky Skates is a worldwide community for those who love to skate. Take your pick from our roller skates, inline skates or skateboards - there is something for everyone.</p>
                    </div>

                </div>
              </Fade>

【问题讨论】：

标签： reactjs fade

【解决方案1】：

这与我面临的问题完全相同。在修改了 react-awesome-reveal 之后，我终于能够找出解决方案。

删除所有其他触发一次道具应该解决滚动问题的所有过渡。
当不止一个时，这个问题尤其出现触发一次prop 存在于返回表达式中。

【讨论】：