https://jsfiddle.net/7doq0vkL/1/
我正在尝试让这个 JSFiddle 在关闭时淡入淡出。它正在工作,但关闭后它并没有再次打开。我试图将 div 设置为显示:900 毫秒后无,但这停止了关闭淡入淡出的工作。谁能看到需要对 JSFiddle 进行哪些更改才能使其再次打开?
<div class="w3-container">
<h2>Animated Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>
<div id="id01" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').classList.add('w3-animate-show');" class="w3-button w3-large w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
</div>
CSS
.w3-animate-opacity {
animation: opac 0.8s
}
@keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
}
.w3-animate-show {
animation: show 0.8s;
animation-fill-mode: forwards;
}
@keyframes show {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
最佳答案
将元素留在页面上 display: none; opacity: 0;
将保持页面上该元素的布局,覆盖您的按钮。您可以使用 animationend
事件在元素淡出后应用 display: none
。
var id01 = document.getElementById('id01');
document.querySelector('.close').addEventListener('click', function() {
id01.classList.add('w3-animate-show');
})
id01.addEventListener('animationend', function() {
if (this.classList.contains('w3-animate-show')) {
this.style.display = 'none';
this.classList.remove('w3-animate-show')
}
});
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<style>
.w3-animate-opacity {
animation: opac 0.8s
}
@keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
}
.w3-animate-show {
animation: show 0.8s;
animation-fill-mode: forwards;
}
@keyframes show {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
</style>
<div class="w3-container">
<h2>Animated Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>
<div id="id01" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-teal">
<span class="w3-button w3-large w3-display-topright close">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
</div>
关于javascript - 如何获得淡入淡出的模态效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45604025/