Reactダイナミック効果——アニメイト.css

1.Reactはアニメイト.cssを導入します.

animate公式サイトanimate公式サイトをご覧ください.必要な動画効果は

です.

reactプロジェクトはanime.css

を導入しました.
npm i anime.css npm i react-addons-cs-trannsition-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(
		
	    

	        
	    
	
	）}

アニメイト.css公式サイトのclassクラス名は、stateのtransitionを修正します.