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

问题描述

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

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

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

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 可以解决此问题，也请提供您的建议。

感谢您的帮助！

解决方法

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

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

没有任何代码：

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

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

,

有一个名为“react-in-viewport”的 npm-package 可用于检测组件是否在视口中。在我的情况下，道具 inViewport 和 enterCount 很有用。当组件第一次在视口中时，我可以显示动画。可以使用以下条件：

if(inViewPort && enterCount === 1){
   //
}

documentation 和 demo 提供了有关使用软件包的足够信息。完整的实现如下：

import handleViewport from 'react-in-viewport';

const Block = (props) => {
    const { inViewport,forwardedRef,enterCount } = props;
    if (inViewport && enterCount === 1) {
        return (
            <div ref={forwardedRef}>
                <div className="container">
                    <div className="try" style={{ backgroundColor: "teal",height: '20vh' }}>
                        <span>Wanna Send goods to your loved ones?</span>
                    </div></div>
            </div>
        )
    }
    return (
        <div ref={forwardedRef}>
            <div className="container">
                <div className="try-static" style={{ backgroundColor: "teal",height: '20vh' }}>
                    <span>Wanna Send goods to your loved ones?</span>
                </div></div>
        </div>
    );
};

const ViewportBlock = handleViewport(Block,/** options: {},config: {} **/);

const Component = (props) => (
    <div>
        <div style={{ height: '100vh' }}>
            <h2>Scroll down to make component in viewport</h2>
        </div>
        <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
    </div>
)

export default Component;

CSS

.try{
  animation-duration: 1s; 
  animation-timing-function: linear; 
  animation-delay: 0s; 
  animation-iteration-count: 1; 
  animation-name: slideInFromBottom; 
  font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  transform: translateY(-50%);
  color: white;
}

.try-static{
  font-family: 'Segoe UI',sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  transform: translateY(-50%);
  color: white;
}