jQuery 无法正确识别 CSS 动画结束事件何时触发

Question

我一直在尝试实现的是一个函数，该函数将被调用以使用 jQuery 中的 .one(); 函数触发错误动画。当我验证一个表单并且它失败时，我在我的代码中调用 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>