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

И поскольку нам нужна эта анимация, чтобы она появлялась при обработке , мы используем после 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