javascript - Microsoft Edge 中的动画不覆盖高度

Question

我设计了一个简单的表单。它在 Chrome、Opera、FF 上运行良好。但在 Edge 上似乎存在一些问题。
我所做的是将一个类分配给一个表单，该表单的大小从 0 增加到自动(除了放大之外)。
但是 Edge 并没有这样做。当我在开发工具中看到并删除 height=0;从代码来看，它开始工作正常，但这不是我想要的。
HTML:

  <h1 style="text-align:center" id="heading">Form Design</h1>
    <form action="" method="post" class="boxed" id="form">
        <h3 style="text-align:center; margin: 4% 0 9% 0;" id="greeting"
        .
        .
        .
        <button type="submit" name="submit" id="submit" class="btn btn-
         outline-primary" style="font-weight: bold" disabled>Submit</button>
      </div>
    </form>
  </div>

CSS:

.boxed{
  background-color: rgba(0,0,0,0.3);
  border: 2px solid var(--new);
  width: 80%;
  margin-top: 10px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

  /* animation-name: open; */
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.68,.65,.37,1);
  animation-delay: 0.3s;

  height: 0;
}

@keyframes open {
  0%   {height:0; -webkit-transform: scaleY(0); transform: scaleY(0);}
  100% {height:auto; -webkit-transform: scaleY(1); transform: scaleY(1);}
}

JS:

$(window).ready(function play(){
  $('.boxed').css('animation-name','open');
  $('.boxed').css('-webkit-animation-name','open');
  $('#bg').css('opacity','0.6');
  $('.boxed').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){
    $('#greeting').css('opacity','1');
    $('input.form-control, select').css('opacity','1');
    $('.btn').css('opacity','1');
  });
.
.
.

现在我知道动画正在运行，因为 onanimationend 的东西正在运行，那么这里有什么问题？
顺便说一句，我已经在这里上传了这些东西: https://iam-shivam.github.io/Form/index.html
尝试在 Edge 和其他浏览器上运行网站，您就会知道其中的区别!

Answer 1

不使用动画，而是使用 Javascript 添加应用 CSS 样式和 CSS3 过渡的类

$(window).ready(function(){
  $(".box").addClass("open"); 
});

.box {
  border: 2px solid black;
  background: seagreen;
  transition: width .4s ease 0s, height .8s ease .4s;
  height: 0;
  width: 0;
  overflow: hidden;
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.box.open {
  width: 500px;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<div class="box"></div>