用react制作一个渐入渐出的modal框

首先需要安装模块

npm install --save react-addons-css-transition-group

然后在组件代码内引用模块

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

以下为完整代码：

import React from 'react';import ReactCSSTransitionGroup from 'react-addons-css-transition-group';class Modal extends React.Component {  constructor(props) {    super(props);    this.state = {      show: this.props.show
    };
  }

  render() {    let modalNode = null;    if (this.state.show) {
      modalNode = (        <div className="umiracle-modal-wrapper">

          <div className="umiracle-modal-header">
             {this.props.headerText}          </div>

          <div className="umiracle-modal-body">
             {this.props.bodyText}          </div>

          <div className="umiracle-modal-footer">
            <div className="umiracle-modal-footer-default">
              <button type="button" className="umiracle-modal-footer-button-default" onClick={this.OnOK.bind(this)}>确定</button>
            </div>
          </div>

        </div>
      );
    }    return (      <div className='modal'>
        <ReactCSSTransitionGroup
          component="div"
          className="umiracle-modal-mask"
          transitionName="fadein"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}>
          {modalNode}        </ReactCSSTransitionGroup>
      </div>
    );
  }

  OnOK() {    this.setState({      show: false
    });
  }
}export default Modal;

css文件如下：

.umiracle-modal-mask {  position: fixed;  z-index: 9998;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, .2);
}.umiracle-modal-wrapper {  background-color: #fff;  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);  transition: all .3s ease;  font-family: Helvetica, Arial, sans-serif;  min-width: 500px;  width: 50%;  position: absolute;  top: 10%;  left: 50%;  -webkit-transform: translateX(-50%);  -moz-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -o-transform: translateX(-50%);  transform: translateX(-50%);
}.umiracle-modal-body {  margin: 0px auto;  padding: 20px 30px;
}.umiracle-modal-footer {  margin: 0px auto;  padding: 20px 30px;
}.umiracle-modal-footer-default {  text-align: center;
}.umiracle-modal-footer-button-default {  border: none;  padding: 10px 45px;  color: white;  background-color: #238de5;  border-radius: 5px;
}.umiracle-modal-show {  opacity: 1;
}.umiracle-modal-hide {  opacity: 0;
}/*
 * the following styles are auto-applied to elements with
 * v-transition="modal" when their visiblity is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */.fadein-enter {  opacity: 0.01;  transition: opacity .5s ease-in;
}.fadein-enter.fadein-enter-active {  opacity: 1;
}.fadein-leave {  opacity: 1;  transition: opacity .5s ease-in;
}.fadein-leave.fadein-leave-active {  opacity: 0;
}

注意
ReactCSSTransitionGroup的transitionEnterTimeout={500}和transitionLeaveTimeout={500}属性定义的过渡时间与css文件内定义的过渡时间transition: opacity .5s ease-in;，会取两者的较小值。其中可以不设置ReactCSSTransitionGroup的两个特性，但是会发出警告。

作者：gongzhen
链接：https://www.jianshu.com/p/764c5c72750d