Question

由于我对React的了解有限，我目前正在处理NextJS。一切都已正确设置并且全部运行，因此我想尝试在Containers之间进行转换并找到下一个变形页面模块https://www.npmjs.com/package/nextjs-morph-page。我真正要确定的是您是停留在这一转换还是可以在页面级进行更改。

我曾尝试像这样在“关于页面”的渲染功能中添加一些样式

import Link from 'next/link'
import { Component } from 'react'

class About extends Component {
    static pageTransitionDelayEnter = true

    constructor(props) {
      super(props)
      this.state = { loaded: false }
    }

    componentDidMount() {
      this.timeoutId = setTimeout(() => {
        this.props.pageTransitionReadyToEnter()
        this.setState({ loaded: true })
      }, 2000)
    }

    componentWillUnmount() {
      if (this.timeoutId) clearTimeout(this.timeoutId)
    }

    render() {
      if (!this.state.loaded) return null
      return (
        <div>
            Hello, world!
            <Link href='/about'><a>About</a></Link>
            <Link href="/work/[postId]" as="/work/4">
                 <a>First Post</a>
           </Link>
           <Link href="/work/[postId]" as="/work/5">
                 <a>Second Post</a>
           </Link>

        <style jsx>{`
        .morph.enter {
          left: -100vw;
          opacity: 1;
        }
        .morph.enter.active {
          left: 0;
          opacity: 1;
          transition: opacity 300ms;
        }
        .morph.exit {
            left: 0;
            opacity: 1;
        }
        .morph.exit.active {
            left: -100vw;
            opacity: 1;
          transition: left 300ms;
        }
        .morph.enter.done {
            opacity: 1;
        }
      `}</style>
        </div>
      );
    }
  }

  export default About;

但是我抱有一点希望，事实证明我是正确的。

这是NextJS的应用程序覆盖代码，很好，可以淡入淡出。

import App, { Container } from 'next/app'
import React from 'react'
import MorphTransition from 'nextjs-morph-page'

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 } = this.props;
    return (
      <Container>
        <MorphTransition timeout={300} classNames="morph">
          <Component {...pageProps} />
        </MorphTransition>
        <style jsx global>{`
          .morph.enter {
            opacity: 0;
          }
          .morph.enter.active {
            opacity: 1;
            transition: opacity 300ms;
          }
          .morph.exit {
            opacity: 1;
          }
          .morph.exit.active {
            opacity: 0;
            transition: opacity 300ms;
          }
        `}</style>
      </Container>
    )
  }
}

这是一个更多的问题，因为我只是在忙于打破左右中间的事物。我可能缺少了解，但是如果有人有想法，我会很棒。

我的理想情况是在页面级别而不是全局页面上更改过渡。可能吗？还是我只是想变得太聪明？

您可以使用NextJS Morph页面进行不同的页面转换吗？

0 个答案: