##react router animation

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

结束，国庆快乐