欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【React】react动效

程序员文章站 2022-03-16 19:01:41
...

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