React动态效果——animate.css

1.React引入Animate.css

• animate官网
  animate官网查看需要的动效

• react项目引入animate.css

npm i animate.css
npm i react-addons-css-transition-group

• 封装react动效木偶组件

import React from 'react'
import "animate.css";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
class Transition extends React.Component {

    constructor(props){
        super(props);
        this.state = {}
    }

    render(){
        return(
            <div>
                <ReactCSSTransitionGroup
                    transitionEnter={true}
                    transitionLeave={true}
                    transitionEnterTimeout={2500}
                    transitionLeaveTimeout={1500}
                    transitionName="animated"
                >
                    {this.props.children}
                </ReactCSSTransitionGroup>
            </div>
        )
    }
}
export default Transition;

• 调用Tansition木偶组件

state = {
        transition:"lightSpeedIn",
        icon:"icon-mulu"
    }

hanldleMenu = ()=>{
        this.setState({
            icon:'icon-mulu'=== this.state.icon ? 'icon-guanbi':'icon-mulu',
            transition:'rotateIn' === this.state.transition ? 'lightSpeedIn' : 'rotateIn'
        })
    }
 render(){
        return(
		<Transition>
	    <div onClick={this.hanldleMenu}
	         style={{width:20}}
	         key="amache"
	         className={`animated ${this.state.transition}`}>
	        <i className={`iconfont ${this.state.icon}`} style={{fontSize:20}}/>
	    </div>
	</Transition>
	）}

animate.css官网中的class类名，修改state中的transition