如何在javascript中将webkit动画更改为另一个动画

我有一个这样的模式框：

<div id="main">
      <div id="myModal" class="modal">
        <div class="modal-content">
          <div class="modal-header">
          </div>
          <div class="modal-body">
            <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="video1"></video>
          </div>
          <div class="modal-footer">
          </div>

当用户单击某个元素时，动画会使模态从屏幕顶部显示到屏幕中心，当用户在modalBox外部单击时，动画会将其显示更改为“无”，但我实际上希望它制作相同的动画，但相反，即从屏幕中心到顶部。所以我在css中完成了这项工作：

 @-webkit-keyframes animateexit
        {
          from{top: 0px; opacity: 0}
          to {top: -300px; opacity: 1}
        }
        @keyframes animateexit
        {
          from{top: 0px; opacity: 0}
          to {top: -300px; opacity: 1}
        }

在剧本中我试图改变

-webkit-animation-name: animatetop;
-webkit-animation-duration: 1s;
 animation-name: animatetop;

为此：

-webkit-animation-name: animateexit;
-webkit-animation-duration: 1s;
animation-name: animateexit;

在javascript中：

span.onclick = function() {
 //modal.style.display = "none";
 modal.style.WebkitAnimationName = "animateexit";
 modal.style.animation-name= "animateexit";
}

但是一旦我这样做了，模态框就不会出现了。 我需要做什么来设置模态框的动画，使其从中心到顶部，而不是在用户单击模态外的跨度时关闭

---

这里是fiddle的链接，我认为这样更容易看到span按钮在哪里？我取出了关闭按钮，当用户在模式外单击时关闭，当用户单击带有类“video”的元素时打开。我认为您面临的问题与此答案中提到的相同-。也就是说，当您将动画从

animatetop

更改为

animateexit

时，您将删除

animatetop

动画，这将使元素捕捉到其原始位置（而不是保持在其当前位置）。因此，反向动画（即

animateexit

）可能没有视觉效果。我不确定是否将此标记为复制，因为您说您正在修改

显示

属性，通常更改

显示

属性会导致所有动画和转换中断，因为该属性根本不可设置动画。@Harry我对JavaScript Im非常陌生尝试应用我所看到的东西，并将它们改变成我或多或少需要的东西，比如反复试验。我不知道如何以我想要的方式设置模态动画，我想我只是在尝试时应用反向动画，但这是我唯一的猜测，如果你认为这是一个重复，请确保标记它。我们需要使之更干净，更容易找到准确的信息

span.onclick = function() {
 //modal.style.display = "none";
 modal.style.WebkitAnimationName = "animateexit";
 modal.style.animation-name= "animateexit";
}