0
有沒有一種方法可以滑出滑入我的模態？我寫了一個代碼，使模式從左向右滑動，我無法弄清楚如何滑出模態。誰能幫我這個？當用戶點擊x按鈕時，模式應該從右向左滑動。如何在不使用jQuery的情況下滑出輸出模式？
在此先感謝！
.headerContactModal {
background-color: white;
color: #1a66b1;
margin-left: 15px;
height:70px;
width:100%;
padding-top: 20px;
font-weight: 700;
}
.headerContactModalMessage {
padding-left: 20px;
padding-right: 5px;
}
.headerContactModalExit{
z-index: 999;
float: right;
display: inline;
color: $dark_gray;
position: absolute;
top: 5px;
}
.headerContactModalPhone {
font-size: 18px;
padding-right: 10px;
}
.slidein {
animation-duration: 700ms;
animation-name: slidein;
animation-iteration-count: 1;
animation-direction: alternate;
}
@keyframes slidein {
from {
margin-left:100%;
}
to {
margin-left:0%;
}
}
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import Button from '../../../common_ui/leafs/Button';
import GenericTextField from '../../components/GenericTextField';
import Icon from '../../../common_ui/leafs/Icon';
class HeaderContactModal extends Component {
static propTypes = {
phoneNumber: PropTypes.string,
messageText: PropTypes.string
}
static defaultProps = {
phoneNumber: '1-800-CALLUS',
messageText: 'Call us:'
}
render() {
return (
<div className="headerContactModal slidein">
<span className="headerContactModalMessage">{this.props.messageText}</span>
<span className="headerContactModalPhone">{this.props.phoneNumber}</span>
<span onClick={this.props.contractContactUs}><Icon className="fa-close headerContactModalExit"/></span>
</div>
);
}
}
export default HeaderContactModal;
你知道如何在反應中設置狀態嗎？只需要像'modalIsOpen：true | false'這樣的模態狀態，並讓你的className依賴於它'className = {\'headerContactModal $ {this.state.modalIsOpen？ 'slidein'：'slideout'} \'}' – azium
是的，我知道設置狀態。但是，如何滑出動畫？ –
只是逆轉關鍵幀的順序？ – azium