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

有没有一种方法可以滑出滑入的模态？我已经编写了一个代码，使模态从左滑入右，我不知道如何滑出模态。有人能帮我吗？当用户单击x按钮时，模态应该从右向左滑动

提前谢谢

.headerContactModal{
背景色：白色；
颜色：#1a66b1；
左边距：15px；
高度：70像素；
宽度：100%；
填充顶部：20px；
字号：700；
}
.headerContactModalMessage{
左侧填充：20px；
右侧填充：5px；
}
.headerContactModalExit{
z指数：999；
浮动：对；
显示：内联；
颜色：$深灰色；
位置：绝对位置；
顶部：5px；
}
.headerContactModalPhone{
字号：18px；
右边填充：10px；
}
斯莱丹先生{
动画持续时间：700ms；
动画名称：slidein；
动画迭代次数：1；
动画方向：交替；
}
@关键帧幻灯片{
从{
左边距：100%；
}
到{
左边缘：0%；
}
}

import React，{PropTypes，Component}来自'React'；
从“类名称”导入类名称；
从“../../../common_ui/leafs/Button”导入按钮；
从“../../components/GenericTextField”导入GenericTextField；
从“../../../common_ui/leafs/Icon”导入图标；
类HeaderContactModal扩展组件{
静态类型={
phoneNumber:PropTypes.string，
messageText:PropTypes.string
}
静态defaultProps={
电话号码：“1-800-CALLUS”，
messageText:'呼叫我们：'
}
render（）{
返回(
{this.props.messageText}
{this.props.phoneNumber}
);
}
}
导出默认HeaderContactModal您要查找的是。当在状态之间移动时（例如，在模态上打开/关闭），简单的插件可以处理转换动画。
您知道如何在react中设置状态吗？只要有一些模态状态，比如
modalIsOpen:true | false
，然后让你的类名依赖于它
className={`headerContactModal${this.state.modalIsOpen？'slidein'：'slideout'}}}
是的，我知道设置状态。但是滑出的动画怎么样？只需颠倒关键帧的顺序？
${this.state.modalIsOpen？
？这不是jQuery吗？不，这是字符串插值