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过渡的类，而不是使用animation

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

动画不会覆盖Microsoft Edge中的高度

1 个答案: