Есть форма и обработчик на 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');
});
То оно просто не срабатывает.....