Я хотел бы реализовать анимацию, чтобы затухать разделы, как в этом примере, в моем приложении. Поэтому я взглянул на fullPage.js.
Однако, поскольку мне нужно интегрировать его в приложение Next.js React с рендерингом на стороне сервера, я не могу его использовать, поскольку он передает на jQuery, что не поддерживает SSR. Поэтому я пробовал свою удачу с ScrollMagic, которая не ретранслирует на jQuery. Но он также не поддерживает SSR (window
потребностей), поэтому я инициализировал его в методе componentDidMount()
и даже загрузил его там (как это рекомендовано здесь).
В настоящее время он работает на начальном этапе, но как только вы меняете страницу и выполняется запрос AJAX, а 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;