react router animation
路由器還是很容易能做到的诗充，但是要在路由器上面加一個動畫苍蔬，這個就有點(diǎn)難度了。
今天我們來看看我在工作中蝴蜓，是如何做動畫效果的
這個是
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的參數(shù)
/* var type="left-to-right";
var type="right-to-left";
var type="top-to-bottom";
var type="bottom-to-top"; */
用來控制路由器的出場動畫
111.gif
結(jié)束格仲，國慶快樂
