jQuery not correctly recognizing when CSS animation end event triggers

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!

fen1x · Accepted Answer · 2018-05-31 17:19:21Z

4

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>

answered May 31, 2018 at 17:19

fen1x

5,8986 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chase Ingebritson Over a year ago

Wow I can't believe I missed that, I guess I just needed a second set of eyes. Thank you so much!

Collectives™ on Stack Overflow

jQuery not correctly recognizing when CSS animation end event triggers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related