react 利用高阶组件给页面加上动画

利用高阶组件给页面加上动画

并不想让所有的路由都有动画效果，只是想对指定的页面有路由切换效果，可以利用高阶组件来完成。

# 定义高阶组件

import React, { Component } from 'react'

import { CSSTransition } from 'react-transition-group'

import '../assets/animate.css'

const withAnimation = Cmp => {

return class extends Component {

render() {

return (

<CSSTransition

in={this.props.match !== null}

timeout={600}

classNames={{

enter: 'animated',

enterActive: 'fadeInDown',

exit: 'animated',

exitActive: 'fadeOutDown'

}}

unmountOnExit

>

<Cmp {...this.props} />

</CSSTransition>

)

}

}

}

export default withAnimation

# 使用

const Page = withAnimation(

class Page extends Component {

render() {

return <div>高阶组件完成路由切换动画效果</div>

}

}

)

<Route path="/home" children={props => <Page {...props} />} />

App.jsx文件

高阶组件定义

需要页面组件中使用高阶组件包裹