【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
上一篇: mysql日期和时间类型