web-dev-qa-db-ja.com

Next.js（React）＆ScrollMagic

この例 のように、セクションをフェードインするアニメーションをアプリケーションに実装したいと思います。したがって、私はfullPage.jsを見てきました。

ただし、サーバーサイドレンダリングを使用して Next.js Reactアプリに統合する必要があるため、jQueryで中継するため、使用できません。 SSRをサポートしていません。したがって、jQueryでリレーしない ScrollMagic で運試しをしましたが、SSRもサポートしていません（windowが必要）。 'componentDidMount()メソッドで初期化し、そこにロードしました（推奨されているように ここ ）。

現在は最初は機能しますが、ページを変更してAJAXリクエストが実行され、Next.jsがページを置き換えるとすぐに、エラーがスローされます（以下を参照）。

ノードが見つかりませんでした

Node was not found React error when using ScrollMagic with Next.js

componentWillUnmount()のAJAXリクエストの前にScrollMagicを破棄しようとしましたが、運がありませんでした。何が問題なのか理解できず、残念ながら見つかりませんでした。 ReactまたはNext.jsを使用したScrollMagicに関するドキュメント。

これは私のコンポーネント全体です：

import React from 'react';
import PropTypes from 'prop-types';

class VerticalSlider extends React.Component {
  constructor(props) {
    super(props);
    this.ScrollMagic = null;
    this.controller = null;
    this.scenes = [];
    this.container = React.createRef();
  }

  componentDidMount() {
    if (this.container.current) {
      // Why "require" here?
      // https://github.com/zeit/next.js/issues/219#issuecomment-393939863
      // We can't render the component server-side, but we will still render
      // the HTML
      // eslint-disable-next-line global-require
      this.ScrollMagic = require('scrollmagic');
      this.initScroller();
    }
  }

  componentWillUnmount() {
    this.scenes.forEach(scene => {
      scene.destroy();
    });
    this.controller.destroy();
    this.scenes = [];
    this.controller = null;
  }

  initScroller() {
    try {
      this.controller = new this.ScrollMagic.Controller();
      if (this.container.current !== null && this.container.current.children) {
        [...this.container.current.children].forEach(children => {
          const scene = new this.ScrollMagic.Scene({
            triggerElement: children,
            duration: window.innerHeight * 1.5,
            triggerHook: 0,
            reverse: true
          });
          scene.setPin(children);
          this.scenes.Push(scene);
        });
        this.controller.addScene(this.scenes);
      }
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <div ref={this.container}>
        {this.props.sections}
      </div>
    );
  }
}

VerticalSlider.propTypes = {
  sections: PropTypes.arrayOf(PropTypes.node).isRequired
};

export default VerticalSlider;
javascriptreactjsanimationscrollmagicnext.js
13
dude

fullpage.js 必要なものと一致していませんか？

ルートをマッピングしてから、app.jsを使用してページのプレースホルダーとして各スライドを作成できるはずです。

それ以外の場合、スクロールマジックの実用的な例があります。リポジトリを検索し、見つかったらここに再投稿します。

1
Paul van Dyk

他のいくつかの場所では、next/dynamicを使用し、オプション「ssr：false」を指定してScrollMagicライブラリをインポートすることを提案しましたが、この戦術では成功しませんでした。 ScrollMagicオブジェクトが正しく返されませんでした。

私のために働いたのは、ScrollMagicライブラリの修正バージョンを使用することでした（Jan Fischerによって修正： https://github.com/bitworking ） ScrollMagicライブラリ全体が「ウィンドウとドキュメントオブジェクトをモックできるように、自己呼び出し関数で」ラップされています。この変更されたScrollMagicをnext.jsプロジェクトにコピーし、パッケージをノードモジュールとして含める代わりに参照しました。

変更されたファイルは次のとおりです： https://raw.githubusercontent.com/bitworking/react-scrollmagic/master/src/lib/scrollmagic.js

1
Erin Geyer