README_CN.md

react-loading-transition

🎉 基于react-router的页面动画切换插件 🤟

Demo:

https://codesandbox.io/s/vibrant-galileo-6byby

安装：

npm install react-loading-transition

1.LoadTransition

此组件是提供一个全局的Loading动画，将该组件包含在全部的Route外来保证Loading Animation与Route在同一子树下。

loadNode

Type: elementType

从外部提供一个Loading动画组件，组件内将提供了isload作为判断动画是否加载的钩子，无默认值。

appear

Type: bool

动画是否在首次加载页面时加载，默认值为false

mintime

Type: number

动画加载的最短时间，防止同路由点击或者加载速度过快导致的动画闪动，默认值为1000

2.LoadMotion

包含在你想设置动画效果的页面Route外

in

Type: bool

这个值参考了react-transition-group兼容react-route的原理，目前想不到更优秀的解决方案，通过传递Route内的props.match来判断是否为匹配路由，

Example

<Route path="/">
  {
    (props)=>(
      <LoadMotion in={props.match !== null}> //传参控制
        <Component />
      </LoadMotion>
    )
  }  
</Route>

timeout

Type: number

控制页面的延迟跳转，由用户手动设置，默认值0。

3.domotion

Param: bool

触发动画函数，提供一个参数，当为true时执行动画，为false时退出动画

4.配合react-router

在项目中，react-router的路由跳转动画有着许多插件，例如react-transition-group、react-motion等，但是却没有类似的cover动画，因为react-loading-transition应运而生。

import {BrowserRouter, Route} from "react-router-dom"
import {LoadTransition, LoadMotion} from "react-loading-transition"
import Loading from "loading.js"
<BrowserRouter>
  <LoadTransition loadNode={Loading}>
    <Route path="/" exact>
      {
       ({match}=>(
         <LoadMotion in={match!==null} timeout={1000}>
           <Component />
         </LoadMotion>
       ))
      }
    </Route>
  </LoadTransiton>
</BrowserRouter>

5.版本迭代

本插件目前还在初步迭代状态，在正式版本中将会推出

• [ ]
• React Hooks
• 集成动画
• 错误测试
• state异步渲染优化