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(
            

                
                    {this.props.children}
                
            
        )
    }
}
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(
		
	    

	        
	    

	
	）}

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