说到动画,那么首先想到的是CSS3的transition和transform。
state结合transition和transform即可做出大部分常用的交互动画了。再复杂一点的就是使用animation和canvas、svg。
以你说的jQuery中的show()和hide()为例:
1、需要执行动画的组件Child:
render() {
const { isShow } = this.props
return (
<div classname="my-component" style={{opacity: isShow ? 1 : 0}>我要使用show()和hide()动画效果</div>
)
}
2、给组件定义一个基础样式:
.my-component {
transition: all .5s ease-out;
}
3、在另外一个组件Parents中调用动画组件,通过isShow来控制动画组件显示和隐藏。
this.state = {
isShow: false
}
render() {
const { isShow } = this.state
return (
<div>
<Child isShow={isShow} />
<button onClick={() => this.SetState({isShow: !isShow})}>点击我切换动画状态</button>
</div>
)
}