0

Next JS 内で比較的単純なページ遷移を設定しようとしています。私はアニメーション ライブラリとして GSAP TweenLite を使用しており、トランジションを処理するために react-transition-group を使用しています。Next.js 6.0 で導入された _app.js コンポーネントでこれらすべてを実行しようとしています。私はそれを「ある程度」機能させていますが、私がやりたいことを正確に行っているわけではありません。

私が抱えている問題は、新しいルートがヒットすると、そのルートのページ コンポーネントがすぐに 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>
    );
  }
}
4

1 に答える 1

1

ご質問に対する正確な回答はありませんが、以下の例のコードを確認することで、問題の解決に役立つことを願っています。

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

別のアプローチは、次のモジュールを使用することです。

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

于 2018-06-07T20:33:17.543 に答える