React 组件中不同状态之间的平滑过渡

Question

我有一个像这样的简单组件：

 var component = React.createClass({
  render: function(){
      if (this.props.isCollapsed){
         return this.renderCollapsed();
      }
      return this.renderActive()
  },
  renderActive: function(){
    return (
      <div>
      ...
      </div>
    );
  },
  renderCollapsed: function(){
    return (
      <div>
      ...
      </div>
    );
  },
});

基本上，当属性更改时，组件将显示活动状态或折叠状态。

我在想的是，当属性发生变化时，即 active->collapse，或者相反，我希望旧视图平滑地“收缩”或“扩展”以显示新视图。比如是active -> collapse，我想让active UI缩小到collapse UI的大小，平滑显示。

我不确定如何实现这种效果。请分享一些想法。谢谢！

原文由 Allan Jiang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个最小的工作示例：

 const collapsible = ({active, toggle}) =>
<div>
  <button type="button" onClick={toggle}>Toggle</button>
  <div className={'collapsible' + (active? ' active': '')}>
    text
  </div>
</div>

const component = React.createClass({
  getInitialState() {
    return {active: false}
  },
  toggle() {
    this.setState({active: !this.state.active})
  },
  render() {
    return collapsible({active: this.state.active, toggle: this.toggle})
  }
})
ReactDOM.render(React.createElement(component), document.querySelector('#root'))

 .collapsible {
  height: 1.5rem;
  transition: height 0.25s linear;
  background: #333;
  border-radius: 0.25rem
}
.collapsible.active {
  height: 7rem
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>

视图可以通过 CSS transition 平滑地“收缩”或“扩展”，这是通过更改 CSS 属性触发的。

要使用 React 控制 CSS 属性，我们可以将状态更改反映到属性值或 className 中 render() 。

在此示例中， .active 类影响 height 值，并由 state.active 控制。该类由 React 切换以响应状态变化，并触发 CSS 转换。

如需更平滑的过渡，请参阅 本文。

原文由 DarkKnight 发布，翻译遵循 CC BY-SA 3.0 许可协议