Javascript 模态反向衰减

我正在测试一个有一个整洁的小淡入的模态，然而，当你关闭模态时，它只是剪切而不是反转淡入

我认为实现这一点最简单的方法是在JS中使用IF语句来控制打开和关闭

实现这一目标的正确符号是：

close.onclick = function()
{
    modal.style.@keyframes.slideIn (and then put the reverse of my numbers here?)
};

原始代码：

HTML:

JS:

---

对于较新的浏览器，该属性将起作用。尝试添加

动画方向：alternate

克隆元素

移除原始元素

并将带有动画类的cloneNode注入到文档中


我更喜欢使用转换

请看这里的演示

NB：我将模态内容容器与模态容器分开，以获得适当的效果


var modal=document.getElementById（“modal”）；
var modal_content=document.getElementById（“模态内容”）；
var button=document.getElementById（“按钮”）；
var close=document.getElementById（“close”）；
button.onclick=函数（）
{
modal.classList.remove（'modal_trans'）；
modal.classList.add（'modal_trans'）；
modal_content.classList.remove（'modal_content'）；
modal_content.classList.add（'modal_content'）；
console.log（modal.classList）
};
close.onclick=函数（）{
//modal.classList.remove（'reverse'）；
modal.classList.remove（'modal_trans'）；
modal_content.classList.remove（'modal_content'）；
console.log（modal.classList）；
}
#模态
{
位置：固定；
z指数：1；
左：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：rgba（0,0,0,0.4）；
不透明度：0；
过渡：均为0.5s；
显示：无；
}
#模态内容
{
背景色：#fefe；
宽度：100%；
位置：固定；
底部：-400px；
过渡：均为0.5s；
z指数：2；
}
#接近
{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
#关闭：悬停，#关闭：聚焦
{
颜色：#000；
文字装饰：无；
光标：指针；
}
#模态头
{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
#模态页脚
{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
#模态体
{
填充：2x16px；
背景色：白色；
}
.modal_trans{
不透明度：1！重要；
顶部：0！重要；
宽度：100%；
显示：块！重要；
}
.modal_内容{
底部：0！重要；
宽度：100%！重要；
保证金：无；
填充：无；
文本对齐：
}
身体{
保证金：自动；
}
底部模式
点击我
&时代
模态头
情态体中的一些文本

情态体中的其他一些文本

模态页脚
这似乎没有任何效果……除非我没有正确地实现它。哦，这是一个多么巧妙的解决方案！谢谢
<h2>Bottom Modal</h2>

<button id="button">Click Me</button>

<div id="modal">

<div id="modal-content">
    <div id="modal-header">
        <span id="close">&times</span>
        <h2>modal header</h2>
    </div>

    <div id="modal-body">
        <p>Some text in the modal body</p>
        <p>Some other text in the modal body</p>
    </div>

    <div id="modal-footer">
        <h2>modal footer</h2>
    </div>

</div><!--modal-content-->
</div><!--modal div-->

#modal
{
position: fixed;
z-index:1;
left:0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
display: none;
}

#modal-content
{
position: fixed;
bottom: 0;
backgroun-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
}

#close
{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

#close:hover, #close:focus
{
color: #000;
text-decoration: none;
cursor: pointer;
}

#modal-header
 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
 }

#modal-footer
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-body
{
padding: 2px 16px;
background-color: white;
}

@-webkit-keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}

var modal = document.getElementById("modal");

var button = document.getElementById("button");

var close = document.getElementById("close");

button.onclick = function()
{
modal.style.display="block";
};

close.onclick = function()
{
modal.style.display="none";
};

window.onclick = function(event)
{
if(event.target == modal)
{
    modal.style.display="none";
}
};