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

Question

What I have been attempting to implement is a function that will be called to trigger an error animation using the .one(); function in jQuery. When I validate a form and it fails, I call the triggerError function in my code, sending it the element that needs to have the animation applied to it. The .error animation class is correctly applied, but the .one(); function does not recognize that the animation has completed in order to remove the .error class.

Here is the Javascript that listens for the click and attempts to apply and remove the animation class:

$('#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');
    });
}

I've also created a Codepen to illustrate this error on an input.

Thanks in advance for any assistance!

Answer 1

You're using animation , not transition - so you should listen to animationend event:

 $('#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>