react router animation
路由器还是很容易能做到的，但是要在路由器上面加一个动画，这个就有点难度了。
今天我们来看看我在工作中，是如何做动画效果的
这个是
github地址：
https://gitee.com/lazytai/react-router-animation.git
demo:
https://lazytai.gitee.io/react-router-animation
我用到的插件是react-spring
https://github.com/drcmda/react-spring
react-spring里面有个Transition
就是用来在组件消失的时候，给一个动画的效果。
import { Transition } from 'react-spring'
<Transition
impl={TimingAnimation}
config={{ duration: 300/* , easing: Easing.linear */ }}
keys={location.pathname}
from={{ opacity: 0, /* transform: " translateY(1000px)", */ }}
enter={{ opacity: 1, /* transform: " translateY(0px)", */ }}
leave={{ opacity: 0, /* transform: " translateY(1000px)", */ }}
>
{
(style) => {
return <Switch
location={location}>
<AnimationRouter path="/" exact
type="top-to-bottom"
style={style}
component={() => {
return <App1 />
}} />
<AnimationRouter path="/app2"
type="left-to-right"
style={style}
component={() => {
return <App2 />
}} />
<AnimationRouter path="/app3"
type="right-to-left"
style={style}
component={() => {
return <App3 />
}} />
<AnimationRouter path="/app4"
type="bottom-to-top"
style={style}
component={() => {
return <App4 />
}} />
</Switch>
}
}
</Transition>
封装 AnimationRouter
const AnimationRouter = (props) => {
/* var type="left-to-right";
var type="right-to-left";
var type="top-to-bottom";
var type="bottom-to-top"; */
var type = props.type || "bottom-to-top"
var baseRadio = props.style.opacity
var style = {}
if (type == "left-to-right") {
var transform = `translateX(${-(1 - baseRadio) * 1000}px)`
style = { ...props.style, transform }
}
if (type == "right-to-left") {
var transform = `translateX(${(1 - baseRadio) * 1000}px)`
style = { ...props.style, transform }
}
if (type == "top-to-bottom") {
var transform = `translateY(${-(1 - baseRadio) * 1000}px)`
style = { ...props.style, transform }
}
if (type == "bottom-to-top") {
var transform = `translateY(${(1 - baseRadio) * 1000}px)`
style = { ...props.style, transform }
}
return <Route
path={props.path} exact={props.exact} component={() => {
return <div className={"animationRouter"} style={style}>
{props.component()}
</div>
}}
/>
}
animationRouter 使用和普通的react route 一样，就是你可以带上一个type的参数
/* var type="left-to-right";
var type="right-to-left";
var type="top-to-bottom";
var type="bottom-to-top"; */
用来控制路由器的出场动画
111.gif
结束，国庆快乐
