Question

从https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_fade开始，我使用了以下CSS类淡入。当模态关闭时，我怎么能淡出？

.w3-animate-opacity{animation: opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

以下是代码：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS 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').style.display='none'" 
        class="w3-button w3-large w3-display-topright">&times;</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>

</body>
</html>

Answer 1

如果您不想使用jQuery，可以试试这些：

添加动画：

.w3-animate-show{
    animation: show 0.8s;
    animation-fill-mode:forwards; // means stop at the last status when animation finished
}
@keyframes show{
    0%{opacity:1}
    100%{opacity:0}
}

并在html代码中更改span标记：

<span onclick="document.getElementById('id01').classList.add('w3-animate-show');" class="w3-button w3-large w3-display-topright">&times;</span>

但这只是一个动画，模态根本不会关闭，它只是看不见。

Answer 2

在How to get Fade-in-out modal effect?

上查看所选答案

它使用：

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')
  }
});

如何让W3schools Modal的例子淡出？

2 个答案: