在组件中的不同状态之间进行平滑过渡

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>
    );
  },
});

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

我在想的是,当财产发生变化时,即主动 - >崩溃,或者相反,我希望旧视图"缩小"或"展开"平滑以显示新视图.例如,如果它处于活动状态 - >折叠,我希望活动UI缩小到折叠UI的大小,并平滑地显示它.

我不知道如何达到这个效果.请分享一些想法.谢谢!

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 属性触发的。

来与控制CSS属性，我们可以反映状态更改属性值或className在render()。

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

要获得更平滑的过渡，请参阅此文章。

Answer 2

您可以改为在同一组件上
切换类,而不是有条件地渲染组件的两个不同的结束状态.您可以使用以下活动和折叠类:

例如:

.active{
  -webkit-transition: -webkit-transform .5s linear;  // transition of 
                                                     // 0.5 of a second
  height: 200px;
}

.collapsed{
  height: 0px;
}

查看此资源以获取示例

Answer 3

标准方法是使用react-transition-group 中的CSSTransitionGroup ，这很容易。用 包裹组件CSSTransitionGroup并在进入和离开时设置超时，如下所示：

<CSSTransitionGroup
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
      {items}
</CSSTransitionGroup>

从v1-stable 文档：

“在这个组件中，当一个新项目被添加到 CSSTransitionGroup 时，它将在下一个勾号中添加 example-enter CSS 类和 example-enter-active CSS 类。”

为 CSS 类添加样式以获得正确的动画。

React docs 中也有很好的解释，请查看。

还有用于动画的第三方组件。