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

Question

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

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

我使用 CSSTransitionGroup 中的 react-transition-group 包实现了动画。我想弄清楚如何在 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 可以解决这个问题，也请提出您的建议。

感谢您的帮助！

Answer 1

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

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

没有任何代码：

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

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

Answer 2

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

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

documentation and 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', Tahoma, Geneva, Verdana, sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  transform: translateY(-50%);
  color: white;
}

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

React v17.0.1 - How can an animation be triggered when a div comes into viewport?

reactjs

css-animations

react-transition-group

web-animations

react-animations