Javascript 如何获得淡入淡出模式效果？

我试图让这个JSFiddle在接近时淡入淡出。它正在工作，但关闭后就再也没有打开过。我试图将div设置为显示：900ms后无，但这停止了关闭淡入工作。有人能看到需要对JSFIDLE做什么更改才能再次打开它吗

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

---

将页面上的元素保留为

display:none；不透明度：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'）
}
});

.w3为不透明度设置动画{
动画：opac 0.8s
}
@关键帧opac{
从{
不透明度：0
}
到{
不透明度：1
}
}
.w3动画表演{
动画：显示0.8秒；
动画填充模式：正向；
}
@关键帧显示{
0% {
不透明度：1
}
100% {
不透明度：0
}
}
动态模态
淡入模态
&时代；
模态头
一些文字

一些文字

模态页脚

检查此链接，您将知道如何操作：

代码的主要问题是没有为模式设置
display:none
，其次，单击该按钮时，必须删除淡入淡出类
“w3 animate show”

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