React怎么做动画啊？

[zl211ybz]

最简单的jq的show()动画应该怎么做？不操作真实dom有点迷茫。还有不操作真实dom的话怎么样获取dom节点的正确的宽度高度？

[benzeph]

reactjs/react-transition-group

chenglou/react-motion

[meibin08]

有个react-redux的示例，里面有做一些动画，可以看看，作为参考
如果觉得不错，记得帮点star哦，谢谢：https://github.com/meibin08/react-redux

meibin08/react-redux

[qingmingsang]

有时候只能操作真实dom

[hyy1115]

说到动画，那么首先想到的是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>
  )
}