Safari在表单提交时剪切动画

Question

似乎对此有很多问题，但到目前为止，没有一个问题提供了有效的答案。

[我们有一个CSS动画，使用这个很好的例子对省略号进行动画处理。https://codepen.io/thetallweeks/pen/yybGra

我们使用的班级在这里

#edit-submit.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 00ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

并且由于我们需要此动画才能显示during表单处理，所以我们使用以下JS

        $('#my-form').bind({
          submit: function (e) {
            var submitButton = $('button[type=submit]');
            if(!submitButton.hasClass('loading')) {
              e.preventDefault();
              console.log('adding!');
              submitButton.addClass('loading');
              setTimeout(() => {
                e.target.submit();
              }, 4000);
            }

您在上面看到的内容允许动画按预期运行约4秒钟（设置的超时），然后动画冻结在其轨迹中。

有什么方法可以防止Safari忽略其通常的特权并允许此动画继续进行，直到用户进入下一页？

Answer 1

这是一个有趣的问题。我打算建议在加载元素（提交按钮）上使用animationend。但是，这是一个无限进行的步进动画。我的解决方案是添加第二个动画，除了等待4秒钟外什么也不做。然后，我附加animationend以等待该“动画”结束并最终提交表单。

$('#my-form').bind({
  submit: function (e) {
    console.log('submit')
    var submitButton = $('button[type=submit]');
    if(!submitButton.hasClass('loading')) {
      e.preventDefault();
      console.log('adding!');
      submitButton.addClass('loading timer');
    }
  }
})

$('#edit-submit').on('webkitAnimationEnd oAnimationEnd animationend', function() {
  alert('submitting form');
  // $('#my-form').submit();
});

#edit-submit.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 00ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;  
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

#edit-submit.timer {
  animation: timer 4s forwards;  
}

@keyframes timer {
  to {
    opacity: 1;
  }
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

#edit-submit {
  font-size: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
   <button id="edit-submit" type="submit">Submit</button>
</form>

jsFiddle