HTML模式彈出式動畫不能正常工作

Question

我創建了下面的代碼來顯示一個彈出窗口，它可以正常工作，之後我添加的動畫具有彈出效果。但是，如果我關閉並嘗試重新打開它，動畫不顯示？模態立即出現。 我該如何解決它？

<div id="overlay"> 
 
    <div class="popout"> 
 
      <p>Content you want the user to see goes here.</p> 
 
      Click here to [<a href='#' onclick='overlay()'>close</a>] 
 
    </div> 
 
</div> 
 

 
<style> 
 
#overlay { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width:100%; 
 
    height:100%; 
 
    text-align:center; 
 
    z-index: 1000; 
 
} 
 

 
#overlay div { 
 
    width:300px; 
 
    margin: 100px auto; 
 
    background-color: #fff; 
 
    border:1px solid #000; 
 
    padding:15px; 
 
    text-align:center; 
 
} 
 

 
.popout { 
 
    animation: popout 1s ease; 
 
    -webkit-animation: popout 1s ease; 
 
} 
 
@keyframes popout { 
 
    from{transform:scale(0)} 
 
    80%{transform:scale(1.2)} 
 
    to{transform:scale(1)} 
 
} 
 
@-webkit-keyframes popout { 
 
    from{-webkit-transform:scale(0)} 
 
    80%{-webkit-transform:scale(1.2)} 
 
    to{-webkit-transform:scale(1)} 
 
} 
 

 
</style> 
 

 
<script> 
 
function overlay() { 
 
\t el = document.getElementById("overlay"); 
 
\t el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
 
} 
 
</script> 
 

 
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

Answer 1

看這個請

<div id="overlay"> 
    <div> 
    <p>Content you want the user to see goes here.</p> 
    Click here to [<a href='#' onclick='overlay()'>close</a>] 
    </div> 
</div> 

<style> 
    #overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    z-index: 1000; 
    } 

    #overlay div { 
    width: 300px; 
    margin: 100px auto; 
    background-color: #fff; 
    border: 1px solid #000; 
    padding: 15px; 
    text-align: center; 
    } 

    .popout { 
    visibility: visible !important; 
    animation: popout 1s ease; 
    -webkit-animation: popout 1s ease; 
    -moz-animation: popout 1s ease; 
    -ms-animation: popout 1s ease; 
    } 

    @keyframes popout { 
    from { 
     transform: scale(0) 
    } 
    80% { 
     transform: scale(1.2) 
    } 
    to { 
     transform: scale(1) 
    } 
    } 

    @-webkit-keyframes popout { 
    from { 
     -webkit-transform: scale(0) 
    } 
    80% { 
     -webkit-transform: scale(1.2) 
    } 
    to { 
     -webkit-transform: scale(1) 
    } 
    } 

    @-moz-keyframes popout { 
    from { 
     -moz-transform: scale(0) 
    } 
    80% { 
     -moz-transform: scale(1.2) 
    } 
    to { 
     -moz-transform: scale(1) 
    } 
    } 


    @-ms-keyframes popout { 
    from { 
     -ms-transform: scale(0) 
    } 
    80% { 
     -ms-transform: scale(1.2) 
    } 
    to { 
     -ms-transform: scale(1) 
    } 
    } 
</style> 

<script> 
    function overlay() { 
    el = document.getElementById("overlay"); 
    var clases = el.className; 
    if (clases.indexOf('popout') == -1) { 
     el.className = 'popout'; 
    } else { 
     el.className = ''; 
    } 
    } 

</script> 

<a href='#' onclick='overlay()'>Click here to show the overlay</a> 

https://jsfiddle.net/xapdhxv3/1/