如何獲得淡入模態效果？

Question

https://jsfiddle.net/7doq0vkL/1/

我試圖讓這個JSFiddle淡入淡出，然后淡出淡出。 它正在工作，但在關閉后它還沒有重新打開。 我嘗試將div設置為顯示：在900ms之后沒有，但是停止了關閉淡入淡出工作。 任何人都可以看到需要對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">&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>

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

Answer 1

使用display: none; opacity: 0;保留頁面上的元素display: none; 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">&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> 

Answer 2

檢查此鏈接，您將知道如何做到這一點： https ： //jsfiddle.net/7doq0vkL/1/

您的代碼的主要問題是您display:none為模態設置display:none ，其次，在單擊該按鈕時，您必須刪除該淡化類"w3-animate-show" 。