react-router-transition - 构建用于react-router转场效果,基于react-motion实现
react-router-transition - 构建用于react-router转场效果,基于react-motion实现
React UI动画
共2368Star
详细介绍
React Router Transition
Painless transitions for React Router, powered by React Motion. Example site.
Requirements
To use the latest version of this package (2.x
), you'll need to use a version of React compatible with hooks, as well as version 5.x
of react-router-dom
.
Installation
npm install --save react-router-transition react-router-dom
Example Usage
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AnimatedSwitch } from 'react-router-transition';
export default () => (
<Router>
<AnimatedSwitch
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
className="switch-wrapper"
>
<Route exact path="/" component={Home} />
<Route path="/about/" component={About}/>
<Route path="/etc/" component={Etc}/>
</AnimatedSwitch>
</Router>
)
.switch-wrapper {
position: relative;
}
.switch-wrapper > div {
position: absolute;
}
Docs
Limitations
This library has some obvious limitations, the most marked of which are:
- no staggering or sequencing of animations
- no durations or timing functions