Next.js (React) 和 ScrollMagic

Question

我想实现一个动画来淡入我的应用程序，就像在 这个例子中一样。 因此，我查看了 fullPage.js。

但是，由于我需要将它集成到带有服务器端渲染的Next.js React 应用程序中，我无法使用它，因为它在不支持 SSR 的 jQuery 上中继。 因此，我尝试了ScrollMagic 的运气，它不依赖于 jQuery。 但它也不支持 SSR（需要window ），因此我已经在componentDidMount()方法中初始化了它，甚至在那里加载了它（就像这里推荐的那样）。

目前它最初可以工作，但是一旦您更改页面并完成 AJAX 请求并且 Next.js 替换页面，就会抛出错误（见下文）：

未找到节点

我试图在componentWillUnmount()的 AJAX 请求之前销毁 ScrollMagic，但没有成功。 我不知道出了什么问题，不幸的是，我找不到关于 ScrollMagic with 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;

Answer 1

fullpage.js 会不会更适合您的需求？

您应该能够映射您的路线，然后使用 app.js 将每张幻灯片构建为页面的占位符

否则，我应该有一个滚动魔法的工作示例，我会寻找 repo 并在找到后共享它。

更新：下面是一个例子使用fullpage.js next.js的

但是，由于我需要将它集成到具有服务器端渲染的 Next.js React 应用程序中，因此我无法使用它，因为它在 jQuery 上中继

fullpage.js 不再依赖于 jquery，它也支持 SSR。

Answer 2

尽管在其他一些场合，人们建议使用 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

Answer 3

您可以通过执行动态导入来获得使用 next.js 的滚动魔法。

useEffect(() => {
    const load = async () => {
      if (typeof window !== undefined) {
        const ScrollMagic = (await import('scrollmagic')).default;
        const controller = new ScrollMagic.Controller();

        new ScrollMagic.Scene({
          triggerElement: '#one',
          triggerHook: 0.5,
          reverse: true,
        })
          .on('enter', function (e: any) {
            console.log('enter');
          })
          .on('leave', function (e: any) {
            console.log('leave');
          })
          .addTo(controller);
      }
    };
    load();
  }, []);