表单提交上的 Safari 动画答案

【问题标题】：Safari animation on form submit表单提交上的 Safari 动画
【发布时间】：2019-02-22 07:27:46
【问题描述】：

我有一个带有表单的页面，在提交后加载很长时间。这就是为什么我决定将微调器放在按钮上。

如果提交按钮我有 div，那就是：

$submit_btn.click(function(e){
    if ($submit_btn.attr("data-send") == "yes"){
        e.preventDefault();
    }
    else {
        $('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
        $new_try_now.submit();
    }
});

在 div spinner 我有 CSS3 动画。

问题是动画在 Chrome 中运行良好，但在 Safari 中无法启动。我认为问题在于 Safari 会杀死页面上的所有进程。

如果没有 AJAX，我如何避免它？

编辑：

动画：

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
    display: block;
    width: 16px;
    height: 16px;

    border: solid 2px transparent;
    border-top-color:  #158FD2;
    border-left-color: #158FD2;
    border-radius: 100%;

    -webkit-animation: nprogress-spinner 900ms linear infinite;
    -moz-animation:    nprogress-spinner 900ms linear infinite;
    -ms-animation:     nprogress-spinner 900ms linear infinite;
    -o-animation:      nprogress-spinner 900ms linear infinite;
    animation:         nprogress-spinner 900ms linear infinite;
}

【问题讨论】：

你已经向你展示了 css 的动画，以便我们可以告诉你 safari 的版本.. :)
非常不错的 JavaScript，但是你没有动画的问题吗？请提供您的 CSS！
这可能是由JS错误引起的。控制台中什么都没有？
Apple 说：您必须设置 -webkit-animation-duration 和 -webkit-animation-name 属性才能看到动画。尝试使用长声明而不是仅使用 -webkit-animation 进行 safari。

标签： javascript jquery css safari css-animations

【解决方案1】：

回答这个问题有点晚了，但仍然可以帮助某人。 :)

Safari 提交后停止运行脚本/gif 等。您需要在已显示微调器后提交表单。

$('#spinner').show(function() {
     $('#form').submit();
});

在我的情况下，#spinner 已经使用 style='display:none' 渲染。如果你不想在需要之前渲染它，你可以在你的#spin_reg CSS 中添加display:none，然后这样写JS：

$('#reg')
    .html('<div id="spin_reg" class="spinner-icon"></div>')
    .show(function() { $new_try_now.submit(); });

【讨论】：