next page transitions下载 - next page transitions源代码下载

next page transitions

Ai源码

v1.0.0-beta.2

下载

下页过渡

Next.js应用程序简单且可自定义的页面过渡

演示： https：//next-page-transitions.now.sh/

这个图书馆为我做什么？

简而言之，它可以轻松地将页面过渡添加到Next.js构建的应用程序中。它可能与其他框架一起使用，但它是围绕新的App组件和接下来的方式设计的。JS处理页面。具体而言，它解决了确保一次仅安装一个页面组件的问题，并且直到上一页完成其出口动画之前，下一页才挂起。如果您的页面组件必须加载数据，则它还具有内置的支持，以显示加载指示器。

例子

如果您希望以身作则学习，请查看一些examples目录，以说明如何使用此库。

入门

首先，安装软件包：

 npm install --save next-page-transitions

接下来，确保您的应用具有自定义App组件；如果不是，请在Next.js readme上按照以下示例创建一个示例。然后，在您的App的渲染方法中，将页面Component包装在PageTransition组件中。您还必须定义自己的CSS课程，以实现所需的过渡动画。为了使该库变得简单，并说明了人们生产和消费CSS的多种方式，它没有提供任何内置样式，并且对您的页面最终如何最终出现在您的页面上。下面的示例具有简单的过渡，可以淡入页面中的页面。

 import App , { Container } from 'next/app'
import React from 'react'
import { PageTransition } from 'next-page-transitions'

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 , router } = this . props
    return (
      < Container >
        < PageTransition timeout = { 300 } classNames = "page-transition" >
          < Component { ... pageProps } key = { router . route } />
        </ 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 >
    )
  }
}

当您移动到新页面时， key道具将会更改， PageTransition组件将检测到这一点。它不会立即卸载页面，而是将page-transition-exit类应用于页面周围的包装器以初始化“退出”过渡，然后将应用page-transition-exit-active类以及开始过渡。这与反应转变组库的工作方式非常相似。在上一页被动画化之后，将安装新页面，并将应用类似的.page-transition-enter和page-transition-enter-active类。每当新页面导航到新页面时，此过程都会重复。

注意：在以前版本的next-page-transitions中，没有必要指定有关PageTransition儿童的key道具。但是，要使热模块重新加载正常工作，有必要进行此道具。移动Foward，未指定key道具的孩子会引发控制台的警告。将来，这可能会成为运行时错误。

支持延迟进入

假设您有一个页面，需要在显示其内容之前提出网络请求。您可以让页面本身呈现一个加载旋转器，直到准备就绪，但是随后您将失去了所有时间完善的美丽页面过渡动画。幸运的是，该库使处理情况变得易于处理。

如果将静态属性pageTransitionDelayEnter = true添加到页面组件中，则页面将通过特殊的回调道具，您可以用来指出所有内容都已经完成加载。同时，您的页面将被安装，但是尚未启动Enter Transition，并且您选择的加载指标将在其位置显示。当您调用回调道具时，将隐藏加载旋转器，并且您的页面将被动画到位！默认情况下，回调是通过pageTransitionReadyToEnter Prop传递的，但是可以通过在PageTransition组件上设置loadingCallbackName Prop来指定这一点。

注意：确保您的组件从其render()函数中返回null ，直到完成其内容并准备好进行动画为止。您的页面在加载时仍将在React组件树中！

“但是我的网络请求通常很快！” “他们通常只花几百毫秒，我不想在这么短的时间内在屏幕上闪烁加载指示器！”该库也可以处理该案例。如果指定了loadingDelay支柱，则直到经过这么长时间才显示加载指示器。如果您的组件准备在此之前输入，则永远不会显示加载指示器，保持UX清洁和活泼。但是，如果您的组件花费了很长时间，则将显示加载指示器，直到您的组件准备就绪为止。

“这听起来有点像从那个反应悬疑谈话中的占位符概念。这个YouTube视频中的一个。”是的，是的！这是此功能的灵感。

这是一个示例组件，该组件模拟具有超时的网络请求：

 class About extends React . 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! </ div >
  }
}

暂时假设您的Loader组件可以呈现出一个不错的旋转加载指示器。您必须告诉PageTransition组件要使用此组件，以及要等待多长时间直到显示网络指示器：

 <PageTransition
  timeout={300}
  classNames="page-transition"
  loadingComponent={<Loader />}
  loadingDelay={500}
  loadingTimeout={{
    enter: 400,
    exit: 0,
  }}
  loadingClassNames="loading-indicator"
>
  <Component {...pageProps} key={router.route} />
</PageTransition>

如果您希望加载指示器在屏幕上/关闭屏幕上进行动画，则还必须添加样式。如果您希望它出现/消失而无需任何动画，则可以添加loadingTimeout={0}并省略loadingClassNames属性。

在examples目录下查看delayed-enter应用程序，以获取一个完整的示例。 “大约”页面（ pages/about.js ）将等待2秒钟，然后显示其内容，与此同时，将显示components/Loader.js组件。玩各种延迟，以更深入地了解该组件的工作原理。

`PageTransition`道具

classNames ：指定将应用于页面包装器的类名称以驱动页面过渡动画。类似于react-transition-group的CSSTranstition组件的classNames 。但是，请注意，目前仅支持该道具的字符串形式。另外，请注意，该库没有单独的“出现”状态；仅需要“输入”和“退出”类。
tag ：指定将用于渲染页面包装器的标签或组件。此元素将接收classNames Prop。如果您想使用语义标记，例如，如果要渲染页面包装器main ，或者需要进一步自定义页面包装器的样式或行为，这将很有用。
timeout ：指定页面过渡动画的超时。类似于react-transition-group的CSSTranstition组件的timeout道具。
loadingComponent ：要显示的一个反应元素
loadingDelay ：以毫秒为单位显示加载指示器之前等待的持续时间。如果页面在此持续时间过去之前完成加载，则永远不会显示加载组件。默认为500ms。
loadingCallbackName ：指定页面完成加载后将收到的道具的名称。默认为pageTransitionReadyToEnter
loadingTimeout ：类似于react-transition-group的CSSTranstition组件的timeout道具。如果将此道具设置为0 ，则不会在屏幕上/关闭屏幕上使用加载指示器进行动画。
loadingClassNames ：指定将应用于加载组件的类名，如果指定了一个名称。类似于react-transition-group的CSSTranstition组件的classNames 。
monkeyPatchScrolling ：默认情况下，每当单击时，Next的Link组件将滚动到页面顶部；当页面过渡时，这可能会产生不良的跳跃效果。如果在安装组件时将此道具设置为true ，则将window.scrollTo进行猴子绘制，以便在页面过渡时可以禁用编程滚动。默认为false，因为这种潜在的粗略行为应选择加入。
skipInitialTransition ：指定在第一个安装座上省略页面过渡。如果您只想在页面之间进行过渡，而不是在第一页加载下，请将skipInitialTransition设置为true 。默认情况下， skipInitialTransition设置为false 。