| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-page-transition

页面过渡组件

安装

# yarn
yarn add xy-page-transition

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { PageTransition } from "xy-page-transition";
ReactDOM.render(
    <PageTransition timeout={300} mode="both">
        {showHome ? <div className="home">Home</div> : <div className="about">About</div>}
    </PageTransition>,
    container
);

API

| 属性 | 说明 | 类型 | 默认值 | | ---------------- | ---------------------------------------------------------------------- | ------- | ------- | | disabled | 是否禁用动画 | boolean | false | | timeout | 过渡时间 | number | 300 | | inTimeout | 进入元素过渡时间,如果不提供，则以 timeout 为准 | number | - | | outTimeout | 离开元素过渡时间,如果不提供，则以 timeout 为准 | number | - | | delayTimeout | 延迟进入元素过渡时间,如果不提供，则以 timeout 为准 | number | - | | transitionAction | 页面过渡操作,指定是前进还是后退, using history.action from History API | Action | - | | mode | 过渡模式,可选值为 in-out out-in both delay 或者不设 | string | both | | data | 传递给页面事件的附加参数 | any | - |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-page-transition is released under the MIT license.