0

我正在开发一个使用 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 可以解决此问题，也请提出您的建议。

谢谢您的帮助！

4

2 回答 2

3

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

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

没有任何代码：

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

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

于 2021-01-31T18:29:32.760 回答
2

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

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

文档和演示提供了有关使用该软件包的足够信息。完整的实现如下：

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', Tahoma, Geneva, Verdana, sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  transform: translateY(-50%);
  color: white;
}
于 2021-02-01T18:09:50.933 回答