Переход на страницу Next.js - PullRequest
Новая
       39

Переход на страницу Next.js

0 голосов
/ 16 сентября 2018

Я использую новый файл _app.js для Next.js, чтобы попытаться создать переход страницы, такой как постепенное исчезновение или слайд, но не могу обойти это.Я использую Styled Components, чтобы применить стиль.Моя структура выглядит следующим образом:

_app.js 

import App, { Container } from 'next/app';
import React from 'react';
import PageTransition from '../components/PageTransition';

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

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

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <PageTransition>
          <Component {...pageProps} />
        </PageTransition>
      </Container>
    );
  }
}

export default MyApp;

компонентов / PageTransition / index.jsx 

import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Root from './index.style';

class PageTransition extends Component {
  state = {
    active: true,
  }

  componentDidUpdate() {
    // Check if children are different to previous children
    // If true, set this.state.active to false
    // After 1000ms transition, set to true again
  }

  render() {
    const { children } = this.props;
    const { active } = this.state;

    return (
      <Transition in timeout={1000}>
        <Root id="root" active={active}>
          {children}
        </Root>
      </Transition>
    );
  }
}

export default PageTransition;

компоненты / PageTransition / index.style.js 

import styled from 'styled-components';

const Root = styled.div`
  opacity: ${p => (p.active ? 1 : 0)};
  transition: opacity 1000ms;
`;

export default Root;

Это будет правильный подход?Если так, я не думаю, что componentDidUpdate достаточно скоро, чтобы поймать изменение страницы.Я пытаюсь выполнить эту работу, но она выполняет рендеринг, и вы видите вспышку страницы перед тем, как состояние обновляется снова, чтобы сообщить ей, что нужно начинать постепенное исчезновение, а затем исчезать. Мне нужно обновить состояние перед визуализацией.

Есть ли способ справиться с этим с помощью React Transition Group?Я посмотрел next-page-transitions , но мне было неудобно, что пакет имеет низкое использование, и я просто хотел более простое решение.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

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

render() {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <PageTransition timeout={300} classNames="page-transition">
          <Component {...pageProps} />
        </PageTransition>
        <style jsx global>{`
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 300ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 300ms;
          }
        `}</style>
      </Container>
    )
  }

Однако я вижу, что вы пытаетесь использовать реагирующую группу перехода. Это библиотека, которую вы захотите использовать, если хотите получить более сложные анимации.

Вот пример из метода рендеринга компонента App быстрого теста, который я сделал с использованием response-transition-group: 

   render() {
        const { Component, pageProps } = this.props;
        return (
          <Container>
            <div ref={x => (this.comp = x)}>
              <TransitionGroup>
                <Transition
                  in={this.props.in}
                  key={this.props.router.route}
                  timeout={{
                    enter: 2000,
                    exit: 2000
                  }}
                  mountOnEnter={false}
                  unmountOnExit={true}
                  onEnter={this.enterTransition}
                >
                  <Component {...pageProps} />
                </Transition>
              </TransitionGroup>
            </div>
          </Container>
        );
      }

Примечание. Я использую GSAP для анимации, и в этом тесте мне нужно было иметь ссылку на содержимое компонента при первоначальном монтировании. Если вам это не нужно, вы можете избавиться от этого div, а затем просто предоставить onEnter функцию, которая будет вызываться при каждой навигации по страницам. 

enterTransition = node => {
    TweenMax.fromTo(node, 0, { x: 0, opacity: 0 }, {x: 200, opacity: 1});
}

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

0 голосов
/ 16 сентября 2018

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

Эту проблему можно решить, поставив display: none на свой компонент по умолчанию, затем, когда страница полностью прорисована, покажите ее и, если необходимо, примените анимацию

...