Как повторить эффект анимации при ошибке заполненности полей формы?

Question

[Happymalina]

Направьте пожалуйста или подскажите. В тестовом проекте было обучение основам JS на примере формы входа. При клике на пункт меню "Вход" выезжала форма вида - "логин", "пароль" и кнопка "войти". Сначала проверяем есть ли данные о логине, если есть - то заполняем поле "логин" и фокусируемся на поле "пароль". Если пользователь нажал кнопку "войти", но в полях пусто или ошибка - форма должна немного потрястись. Она трясется только один раз. Нашла вариант с JQuery, но хочется понять JS. Предполагаю, что нужен какой-то цикл, чтобы этот эффект был каждый раз после нажатия на кнопку при неверно заполненных полях. НО не могу понять как его написать правильно...Подскажите пожалуйста, какие могут быть тут "варианты ответа". Вот код:

<div class="account-menu">
      <a href="#" class="account-menu-enter">Вход </a>
</div>

.form-popup-show {
        display: block;
        animation: login-open 0.7s;
        -webkit-animation: login-open 0.7s;
    }
    
    .form-popup-close {
        color: #000;
        position: absolute;
        margin: -35px 0 0 180px;
        text-align: center;
        text-decoration: none;
        width: 360px;
    }

    .form-popup-error {
        animation: login-error 0.2s;
         -webkit-animation: login-error 0.2s;
    }

var link = document.querySelector('.account-menu-enter');
var popup = document.querySelector('.form-popup');
var close = popup.querySelector('.form-popup-close');
var form = popup.querySelector('form');
var login = form.querySelector('.field-popup-login');
var password = form.querySelector('.field-popup-password');
var storage = localStorage.getItem("login");

link.addEventListener('click', function(event) {
	event.preventDefault();
	popup.classList.add('form-popup-show');
		if (storage) {
			login.value = storage;
			password.focus;
		}
		else {
			login.focus();
		}
	}, false );

link.addEventListener("click", function(event) {
	if (popup.classList.contains("form-popup-error")) {
		popup.classList.remove("form-popup-error");
	}
}, false);


close.addEventListener('click', function(event) {
	event.preventDefault();
	popup.classList.remove('form-popup-show');
	}, false);


form.addEventListener("submit", function(event) {
	if (!login.value || !password.value) {
		event.preventDefault();
		popup.classList.add("form-popup-error")
	}
	else {
		localStorage.setItem("login", login.value);
	}
}, false);

Answer 1

[Александр N++]

Посоветую для анимации css фреймворк daneden.github.io/animate.css

// события вызываются для удаления класса анимации когда анимация проиграла
$('#yourElement').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

В вашем случаи нужно удалить класс анимации и восстановить значения css по умолчанию и добавить заново класс что бы анимация проигралась заново.

Comments

[Happymalina]

Александр, спасибо большое что откликнулись!позвольте уточняющий вопрос к Вам) так как наставник нам тоже сказал, что класс надо удалить, но куда это писать? т.е. это должно быть отдельное правило от того, где я класс добавляю или в нем же? не могли бы Вы примерно написать как это должно выглядеть..что за чем... буду очень признательна..)

[Александр N++]

popup.classList.add("form-popup-error")
после проигрывания анимации удалите класс
// jquery

popup.classList.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass('form-popup-error');
});

Только я не вижу что делает анимация сделайте демку jsfiddle.net

[Happymalina]

Александр, вот, демка тут.. fiddle.jshell.net/077q8txt если нажмете "Войти" форма трясется..но один раз( только если закрыть и снова открыть

[Александр N++]

Happymalina:

form.addEventListener('submit', function(event) {
     
    if (!login.value || !password.value) {
      event.preventDefault();
      popup.classList.add('login-popup-error');
        
        setTimeout(function(){
            popup.classList.add('login-popup-show');         
            popup.classList.remove('login-popup-error');         
         },1000)   
        
        return false;
    } 
    localStorage.setItem('login', login.value);
   
  }, false);

[Александр N++]

popup.classList.add('login-popup-show'); лишний это я тестил смотрел почему форма падает заново. что то в css

[VazyaOZ]

Александр N++: форма падает потому что вы удаляете 'login-popup-error' из classList, а в этот момент остаются два класса login-popup login-popup-show они и срабатывают.

[Happymalina]

a toggle здесь не возможно применить??

[VazyaOZ]

Happymalina: можно, но я лично в нем решения не вижу. ))
Вот кривое, но решение. Форма мерцает при нажатие, но не сваливается.
Что бы решить проблему со сваливанием надо избавиться от login-popup-show, или схитрить. )

form.addEventListener('submit', function(event) {
    if (!login.value || !password.value) {
      event.preventDefault();
        //проверяем наличие класса login-popup-error
        //и удаляем если он есть
        if (popup.classList.contains('login-popup-error')) {
            popup.classList.remove('login-popup-error');
        }
        //даем браузеру возможность расслабиться и сделать рендеринг
        setTimeout(function(){ popup.classList.add('login-popup-error'); });
    } else {
      localStorage.setItem('login', login.value);
    }
  }, false);

[VazyaOZ]

Happymalina: кстати у Вас форма при повторном нажатие на кнопку Вход трясется если до этого была ошибка при входе, чего мне кажется быть не должно.

[VazyaOZ]

На Хабре нашлось элегантное решение: Рендеринг WEB-страницы: что об этом должен знать f....

form.addEventListener('submit', function(event) {
    if (!login.value || !password.value) {
      event.preventDefault();
        if (popup.classList.contains('login-popup-error')) {
            popup.classList.remove('login-popup-error');
        }
        popup.offsetHeight;
        popup.classList.add('login-popup-error');
    } else {
      localStorage.setItem('login', login.value);
    }
  }, false);