Xy-page-transition NPM


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

NPM version npm download

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	-