Question

我正在测试一个具有整洁淡入淡出效果的模态，然而，当你关闭模态时，它只是切掉而不是反转渐变。

我认为最简单的方法是在JS中控制开启和关闭的IF语句。

实现这一点的正确表达方式如下：

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

原始代码：

HTML：

<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-->

CSS：

#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}
}

JS：

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";
}
};

Answer 1

将动画事件应用于html元素只会触发一次动画..无论你使用一些javascript技巧，如：

克隆元素
删除原始元素
并将带有动画类的cloneNode注入文档

我更愿意使用过渡

见这里的演示

注意：我从您的模态容器中分离了您的模态内容容器以获得正确的效果

＆＃13;

var modal = document.getElementById("modal");
var modal_content = document.getElementById("modal-content");

var button = document.getElementById("button");

var close = document.getElementById("close");

button.onclick = function()
{
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 = function(){
//modal.classList.remove('reverse');
modal.classList.remove('modal_trans');
modal_content.classList.remove('modal_content');
console.log(modal.classList);
}

＆＃13;

#modal
{
position: fixed;
z-index:1;
left:0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(0,0,0,0.4);
opacity: 0;
transition:all 0.5s;
display:none;
}

#modal-content
{
background-color: #fefefe;
width: 100%;
position:fixed;
bottom:-400px;
transition:all 0.5s;
z-index:2;
}

#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;
}

.modal_trans{
  opacity:1 !important;
  top:0 !important;
  width:100%;
  display:block !important;
}
.modal_content{
  bottom:0 !important;
  width:100% !important;
  margin:none;
  padding:none;
  text-align:
}
body{
  margin:auto;
}

＆＃13;

<h2>Bottom Modal</h2>

<button id="button">Click Me</button>

<div id="modal">
</div><!--modal div-->
<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-->

＆＃13;

Answer 2

对于较新的浏览器，animation-direction属性可以解决问题。尝试将animation-direction: alternate;添加到模态的CSS中。

模态反向淡化

2 个答案: