0

Есть форма и обработчик на submit:

form.addEventListener('submit', function(event) {
     event.preventDefault();
     var str = form.elements.text.value.toLowerCase();
     if(str != 'строка') {
        form.elements.text.value = '';
        form.elements.text.focus();
        form.classList.add('error');
        setTimeout(function(){form.classList.remove('error');}, 400);
     } else {
         location.replace('http://yandex.ru');
     }
 });  

Суть данного кода такова: если значение инпута в момент отправки формы не соответствует некой строке, форме навешивается класс с анимацией:

.error {
        animation-name: error;
        animation-duration: .4s;
        animation-timing-function: linear;
    }
    @keyframes error {
        0% {left: 50%;}
        25% {left: 50.5%;}
        50% {left: 50%}
        75% {left: 49.5%}
        100% {left: 50%}

    }

В данный момент он удаляется с помощью таймера.

Вопрос: Как в данном случае использовать событие transitionend?

Если вместо setTimeout вешать на форму

form.addEventListener('transitionend', function(event) {
     form.classList.remove('error');
});

То оно просто не срабатывает.....

1 ответ 1

3

У Вас в коде анимация, поэтому нужно использовать события анимации, коими являются -

  • animationstart
  • animationend
  • animationiteration
  • animationcancel
2
  • Благодарю, думалось мне, что transitionend срабатывает по окончании любой CSS анимации, покрайней мере здесь так написано.....
    – pepel_xD
    Commented 23 дек. 2016 в 8:17
  • Мне кажется что написанное относится к анимации вообще, а не конкретно к transition или animation.
    – user220409
    Commented 23 дек. 2016 в 8:48

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.