JQuery неправильно распознает, когда срабатывает событие завершения CSS-анимации

Question

Я пытался реализовать функцию, которая будет вызываться для запуска анимации ошибки с использованием функции .one(); в jQuery.Когда я проверяю форму, и она терпит неудачу, я вызываю функцию triggerError в своем коде, отправляя ей элемент, к которому должна быть применена анимация.Класс анимации .error применяется правильно, но функция .one(); не распознает, что анимация завершена, чтобы удалить класс .error.

Вот Javascript, который прослушивает щелчок и пытается применить и удалить класс анимации:

$('#search').on('click', function(e) {
    if ($(this).val() === "") {
        triggerError($(this).parent());
        return;
    }
});

function triggerError(input) {
    input.addClass('error');

    input.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
        input.removeClass('error');
    });
}

Я также создал Codepen , чтобы проиллюстрировать этоошибка на входе.

Заранее спасибо за любую помощь!

Answer 1

Вы используете animation, а не transition - поэтому вам следует прослушать animationend событие:

$('#search').on('click', function(e) {
  if ($(this).val() === "") {
    triggerError($(this).parent());
    return;
  }
});

function triggerError(input) {
  console.log('start');
  input.addClass('error');

  input.one('webkitAnimationEnd animationend', function() {
    input.removeClass('error');
    console.log('stop');
  });
}

.inline-form {
  display: inline-flex;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  width: 100%;
}

.inline-form input {
  flex-grow: 100;
  margin: 0;
}

.inline-form .input-button {
  height: 2.3125rem;
  padding: 0 10px;
  margin: 0;
}

@keyframes error {
  from {
    border: 1px solid red;
  }
  to {
    border: 1px solid transparent;
  }
}

.error {
  animation-name: error;
  animation-duration: 3s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-form">
  <label for="search-input" class="hidden"></label><input id="search-input" type="text" placeholder="Search">
  <button id="search" class="input-button"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>