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文件

高阶组件定义

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