Выявить и скрыть CSS-анимацию

Question

Итак, у меня есть анимация, которая покажет что-то, это видно в нескольких местах на моем сайте.

Однако сейчас я пытаюсь раскрыть и скрыть модальное наложение.

Появляется поверх модальной формы при отправке и исчезает, когда вызов AJAX возвращает некоторые данные.

Проблема в том, что анимация застревает после «сокрытия», что означает, что я не могу нажать кнопку «Отправить» и заставить ее «раскрыться» снова.

До AJAX:

<div class="loadingElement animate-reveal" style="display:none;">...</div>

AJAX Start:

$(".loadingElement").show();

AJAX Успех:

$(".loadingElement").removeClass("animate-reveal");
$(".loadingElement").addClass("animate-conceal");

Если вы хотите взглянуть на себя, перейдите по ссылке: http://halden.101test1.co.uk/college/

Answer 1

Вы удаляете класс анимации-открытия из вашего элемента, который больше никогда не оживит.Прямо там, где вы делаете $ ('. LoadingSignin'). Show ();вам нужно повторно добавить эту анимацию в начале вашего запроса AJAX.

Просто переключите два необходимых класса, которые позволят вам получить анимацию и отобразить ваш элемент.

Там, где начинается ваш AJAX, добавьте следующую строку:

$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');

Вот каков будет этот начальный блок:

if (form.valid()) {
    $('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
    $(".loadingSignin").show();

Затем вставьте точно такой жееще раз, где ваш вызов ajax закончен.

success: function (data) {
    // log data to the console so we can see
    console.log(data);
    $('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');

Результат:

Answer 2

Таким образом, я нашел решение, но оно выглядит несколько хакерским, не стесняйтесь все еще взвешивать.

AJAX Успех:

$(".loadingSignin").addClass("animate-conceal");

$(".loadingSignin").one("animationend webkitAnimationEnd", function () {
    $(".loadingSignin").hide();
    $(".loadingSignin").removeClass("animate-conceal");
    $(".loadingSignin").off("animationend webkitAnimationEnd");
});