如何获得淡出模态效果？ [英] How to get Fade-in-out modal effect?

问题描述

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

我试图让这个JSFiddle淡入淡出并关闭。它正在工作，但在关闭后它没有再次打开。我试图设置div显示：900毫秒后没有，但停止了近距离淡入淡出效果。任何人都可以看到JSFiddle需要做什么更改才能让它再次打开？

 < div class =w3 -container> 
< h2>动画模式< / h2> 
 
< button onclick =document.getElementById（'id01'）。style.display ='block'class =w3-button w3-black> Fade In Modal< / button> 
 
< div id =id01class =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>模态标头< / h2> 
< / header> 
< div class =w3-container> 
< p>一些文字..< / p> 
< p>一些文字..< / p> 
< / div> 
< footer class =w3-container w3-teal> 
< p> Modal Footer< / p> 
< / footer> 
< / div> 
< / div> 
< / div> 
  

CSS

  .w3-animate-opacity {
动画：opac 0.8s 
} 
 
 @keyframes opac {
 from {
 opacity：0 
} 
到{
 opacity：1 
} 
} 
 
 .w3-animate-show {
 animation：show 0.8秒; 
 animation-fill-mode：forwards; 
} 
 
 @keyframes显示{
 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 = 样式表/><风格> .w3-animate-opacity {animation：opac 0.8s} @keyframes opac {from {opacity：0} to {opacity：1}} .w3-animate-show {animation：show 0.8s;动画填充模式：转发; } @keyframes show {0％{opacity：1} 100％{opacity：0}}< / style>< div class =w3-container> < h2>动画模式< / h2> < button onclick =document.getElementById（'id01'）。style.display ='block'class =w3-button w3-black> Fade In Modal< / button> < div id =id01class =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>模态标头< / h2> < /报头> < div class =w3-container> < p>一些文字..< / p> < p>一些文字..< / p> < / DIV> < footer class =w3-container w3-teal> < p> Modal Footer< / p> < /页脚> < / DIV> < / div>< / div>

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

I'm trying to get this JSFiddle to fade-in and fade out on close. It's working but after closing it hasn't been opening again. I tried to set the div to display:none after 900ms but that stopped the close fade working. Can anyone see what change to JSFiddle would need to be made to allow it to open again?

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

解决方案

Leaving the element on the page with display: none; opacity: 0; will maintain the layout of that element on the page, covering your button. You can use the animationend event to apply display: none once the element has faded out.

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>

这篇关于如何获得淡出模态效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！