reactjs - React v17.0.1 - 当 div 进入视口(viewport)时如何触发动画？

Question

我正在开发一个使用 React.js 构建的网络应用程序。我想在 div 进入视口(viewport)时触发动画。目前，我可以运行动画，但动画不会等待 div 进入视口(viewport)。

假设用户访问站点并在安装组件之前切换到另一个选项卡。因此，在用户切换回此选项卡之前，假设组件已安装，但动画应该仅在用户切换回此选项卡后才开始。

我使用 react-transition-group 包中的 CSSTransitionGroup 实现了动画。我想弄清楚如何在 div 进入视口(viewport)时触发动画。

RequestFormComponent.js

const RequestForm = (props) => {

  const handlesubmit = ()=> {
  ///
  }
  return (
        <>
            <Jumbotron style={{ backgroundImage: './images/jumbo.jpg'}}>
                <div className="container">
                   <div className="row">
                      <CSSTransitionGroup
                         transitionName="request-form"
                         transitionAppear={true}
                         transitionAppearTimeout={1000}
                         transitionEnter={false}
                         transitionLeave={false}
                         transitionEnterTimeout={1000}
                         transitionLeaveTimeot={300}
                         >
                            <div className="request_form">
                               <h4>Create a request</h4>
                                  <Form id="create-request" model="request" onSubmit={(values) => handleSubmit(values)}>
                                     ///
                                  </Form>
                            </div>
                         </CSSTransitionGroup>
                     </div>
                </div>
            </Jumbotron>

        </>
    )
}

export default RequestForm;

CSS

.request-form-appear.request-form-appear-active {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1; 
  animation-name: slideInFromRight;
}

我知道这可以通过使用 JQuery 来实现，但是有没有办法只使用 React.js 来实现呢？即使使用 JQuery 和 React 可以解决这个问题，也请提出您的建议。

感谢您的帮助!

Answer 1

一般来说，检查一个元素是否在视口(viewport)中可以使用getBoundingClientRect来完成。 .您可以将监听器附加到滚动事件并在元素滚动到视口(viewport)中时触发动画。

但是，如果我对您的理解正确，您正在寻找处理页面根本不可见但变为可见的情况。要处理此问题，您可以使用 Page Visibility API .

没有任何代码:

1. 您将在安装组件时检查页面是否处于事件状态。如果是，请继续执行 3。
2. 如果页面不可见，请将监听器附加到 visibilitychange .如果/当事件触发时，继续执行 3。
3. 触发动画。

此外，我非常有信心任何可以使用 jQuery 完成的事情都可以使用 React 完成。 ;)