文章/答案/技术大牛

发布

社区首页 >问答首页 >使用ReactCSSTransitionGroup为组件设置动画

问使用ReactCSSTransitionGroup为组件设置动画
EN

Stack Overflow用户

提问于 2018-02-10 03:04:51

回答 1查看 68关注 0票数 0

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

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

我做错了什么？或者我应该用不同的方式来做，有什么建议吗？

javascript

reactjs

reactcsstransitiongroup

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-10 05:13:05

您需要在转换组中有条件地呈现模态组件。它只转换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}属性过时了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48712496

复制

相似问题

问使用ReactCSSTransitionGroup为组件设置动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ReactCSSTransitionGroup为组件设置动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ReactCSSTransitionGroup为组件设置动画
EN