0

React.jsを使用して構築しているWebアプリに取り組んでいます。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 のみを使用して実現する方法はありますか? React で JQuery を使用して回避策がある場合でも、提案をお願いします。

助けてくれてありがとう！

4

2 に答える 2

3

一般的に言えば、要素がビューポートにあるかどうかを確認するには、getBoundingClientRectを使用します。スクロール イベントにリスナーをアタッチし、要素がビューポートにスクロールされた場合にアニメーションをトリガーすることができます。

しかし、私の理解が正しければ、ページがまったく表示されていなかったのに、表示されるようになった場合に対処しようとしているようです。これを処理するには、Page Visibility APIを使用できます。

コードなし:

  1. コンポーネントがマウントされたときにページがアクティブかどうかを確認します。その場合は、3 に進みます。
  2. ページが表示されない場合は、 visibilitychangeにリスナーをアタッチします。イベントが発生した場合は、3 に進みます。
  3. アニメーションをトリガーします。

また、 jQuery を使用して実行できることはすべて React でも実行できると確信しています。;)

于 2021-01-31T18:29:32.760 に答える