首先需要安装模块
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
的两个特性,但是会发出警告。