使用ReactCSSTransitionGroup

Question

我正在尝试使用ReactCSSTransitionGroup按钮点击动画模式。现在，模式出现在按钮单击但没有过渡。我的渲染方法如下所示：

render() {
return (
  <div>
    <button onClick={this.handleModOpen}>show modal</button>

    <ReactCSSTransitionGroup
      transitionName="modal"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}
    >
      <Modal
        show={this.state.isOpen}
        onClose={this.handleModClose}
      >
        Hello user(187-5451-32)!
      </Modal>
    </ReactCSSTransitionGroup>
  </div>
);

}

这里是css

.modal-enter {
  opacity: 0.01;
}

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

.modal-leave {
  opacity: 1;
}

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

我做错了什么？或者我应该以不同的方式做任何推荐吗？

Answer 1

您需要有条件地渲染过渡组中的模态组件。它只转换dom中元素的加法和减法。所以像这样：

render() {
  return (
    <div>
      <button onClick={this.handleModOpen}>show modal</button>

      <ReactCSSTransitionGroup
        transitionName="modal"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}
      >
        {this.state.isOpen &&

          <Modal
            show={true}
            onClose={this.handleModClose}
          >
            Hello user(187-5451-32)!
          </Modal>

        }
      </ReactCSSTransitionGroup>
    </div>
  );
}

这会使模态上的show={true}道具过时。