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() {
	el = document.getElementById("overlay");
	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/