使用 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} 道具过时。

使用 ReactCSSTransitionGroup 动画组件

Animating component with ReactCSSTransitionGroup

javascript

reactjs

reactcsstransitiongroup