Question

查看component docs，反应组件在其生命周期中有三个项目：mount，unmount和update。 React transition groups似乎是在反应中应用过渡和动画的最常用方法。是否可以在更新时使用（即状态转换）或仅在安装/卸载某个项目时使用？

Answer 1

是的，您可以添加状态更改转换。您需要为子元素提供一个键，该键将在状态更新时更改。

来自docs：

您必须为ReactCSSTransitionGroup的所有子项提供键属性，即使只渲染单个项目也是如此。这就是React将如何确定哪些孩子已进入，离开或留下。

因此，您可以这样做：

class Container extends React.Component {

  constructor(props) {
    super(props);
    this.state = { 
        number: 0 
    };
  }

  handleClick(e){
    this.setState({number: this.state.number + 1});
  }

  render(){

    return (
      <div className='container'>
        <CSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                <div className="number" key={this.state.number}>{this.state.number}</div>
        </CSSTransitionGroup>
        <button onClick={this.handleClick.bind(this)}>Click Me!</button>
      </div>
    )
  }
}

React.render(<Container />, document.getElementById('container'));

的CSS

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}

Here is fiddle.

我可以使用ReactTransitionGroup在更新时创建转换吗？

1 个答案: