如何在不使用 jQuery 的情况下滑出模式？答案

【问题标题】：How to slide OUT modal without using jQuery?如何在不使用 jQuery 的情况下滑出模式？
【发布时间】：2016-06-01 07:06:36
【问题描述】：

有没有一种方法可以让我滑出我的模式？谁能帮我这个？当用户点击 x 按钮时，模态框应该从右向左滑出。

提前致谢！！

.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'}`}
是的，我知道设置状态。但是滑出的动画呢？
只是颠倒关键帧的顺序？
${this.state.modalIsOpen ? ??那不是 jQuery 吗？
不，那是字符串插值developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

标签： css reactjs css-transitions css-animations

【解决方案1】：

您正在寻找的是ReactCSSTransitionGroup。在状态之间移动时（例如在您的模式上打开/关闭）时对处理过渡动画做出反应的简单插件。

【讨论】：