Переходы запускаются слишком рано при использовании компонента страницы _app.js в Next.JS 6 - PullRequest
Новая
       36

Переходы запускаются слишком рано при использовании компонента страницы _app.js в Next.JS 6

0 голосов
/ 01 июня 2018

Я пытаюсь настроить относительно простой переход страниц в Next JS.Я использую GSAP TweenLite в качестве моей библиотеки анимации, и я реагирующая группа перехода для обработки переходов, и я пытаюсь сделать все это в компоненте _app.js, который был представлен в Next.js 6.0.У меня это "вроде" работает, но оно не делает именно то, что я хочу.

Проблема, с которой я сталкиваюсь, заключается в том, что при попадании на новый маршрут компонент страницы для этого маршрута немедленно переходит в верхнюю часть DOM, а компонент Exiting перемещается в нижнюю часть страницы до тех пор, покапереходы и размонтирование.

Я хочу, чтобы это был переход и размонтирование текущего компонента страницы, а затем переход и монтирование нового компонента страницы при изменении маршрута.Если кто-нибудь посоветует, как мне лучше это настроить, я был бы очень признателен.

//GSAP Animations
const fadeIn = node => {
  TweenLite.set(node, {
    opacity: 0
  });
  TweenLite.to(node, 1, {
    opacity: 1,
    ease: Power2.easeInOut
  });
};

const fadeOut = node => {
  TweenLite.set(node, {
    opacity: 1,
    scale: 1
  });
  TweenLite.to(node, 1, {
    opacity: 0,
    scale: 0.5,
    ease: Power2.easeInOut
  });
}; 

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }


  render() {
    const { Component, pageProps, style } = this.props;
    return (
      <Container>
          <Layout>
            <TransitionGroup>
              <Transition
                key={this.props.router.pathname}
                timeout={1000}
                in={true}
                onEnter={fadeIn}
                onExit={fadeOut}
                mountOnEnter={true}
                unmountOnExit={true}
              >
                <Component {...pageProps} />
              </Transition>
            </TransitionGroup>
          </Layout>
      </Container>
    );
  }
}

1 Ответ

0 голосов
/ 07 июня 2018

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

https://github.com/xavczen/nextjs-page-transitions

Другой подход будетиспользовать следующий модуль:

https://github.com/illinois/next-page-transitions

...