Next.js(React) & ScrollMagic

Я хотел бы реализовать анимацию, чтобы затухать разделы, как в этом примере, в моем приложении. Поэтому я взглянул на fullPage.js.

Однако, поскольку мне нужно интегрировать его в приложение Next.js React с рендерингом на стороне сервера, я не могу его использовать, поскольку он передает на jQuery, что не поддерживает SSR. Поэтому я пробовал свою удачу с ScrollMagic, которая не ретранслирует на jQuery. Но он также не поддерживает SSR (window потребностей), поэтому я инициализировал его в методе componentDidMount() и даже загрузил его там (как это рекомендовано здесь).

В настоящее время он работает на начальном этапе, но как только вы меняете страницу и выполняется запрос AJAX, а Next.js заменяет страницу, выдается ошибка (см. Ниже):

Узел не найден

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

Я попытался уничтожить ScrollMagic до запроса AJAX в componentWillUnmount(), но не повезло. Я не могу понять, что случилось, и, к сожалению, я не смог найти документацию о ScrollMagic с React или Next.js.

Это мой весь компонент:

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;

Ответ 1

Разве fullpage.js не будет больше соответствовать тому, что вам нужно?

Вы должны иметь возможность отобразить свои маршруты, а затем создать каждый слайд в качестве заполнителя для страницы, используя app.js.

Иначе у меня есть рабочий пример магии прокрутки, я посмотрю репо и перепишу его здесь, как только найду.

Ответ 2

Это, вероятно, не очень хороший ответ для SO, но я подумал, что, возможно, это поможет.

React имеет действительно хорошую и ухоженную библиотеку перехода, называемую реакционно react-transition-group а Next.js имеет аналогичную библиотеку, называемую next-page-transitions. Существует хороший пример того, как его использовать. В примере используется _app.js для легкой анимации каждого перехода на страницу. Я предлагаю вам взглянуть на этот пример и попытаться интегрировать его в ваше приложение.

Ответ 3

Хотя в некоторых других местах люди предлагали использовать next/dynamic и импортировать библиотеку ScrollMagic с опцией "ssr: false", я не добился успеха с этой тактикой. Объект ScrollMagic не был возвращен правильно.

В итоге мне удалось использовать модифицированную версию библиотеки ScrollMagic (измененной Яном Фишером: https://github.com/bitworking), в которой вся библиотека ScrollMagic обернута "в функцию самовозбуждения, чтобы я мог макет окна и документа объекта. " Я скопировал этот измененный ScrollMagic в свой проект next.js и использовал его вместо включения пакета в качестве модуля узла.

Вот измененный файл: https://raw.githubusercontent.com/bitworking/react-scrollmagic/master/src/lib/scrollmagic.js