Почему при удалении и добавлении класса css анимация не повторяется?

Question

[Анастасия]

Здравствуйте. Почему анимация не повторяется при каждом нажатии? И как сделать, чтоб анимация повторилась?


В жизни у меня немного другая картина:
Есть форма и есть валидация полей на js. При нажатии на отправку формы, поля, которые не прошли валидацию должны быть анимированы. При повтором нажатии, анимация должна повториться. И в итоге у меня после нажатие на отправку формы удаляется класс, затем валидация и класс снова добавляется, однако анимации нет...

Comments

[Froggyweb]

document.querySelector("button").onclick = function(){
  document.querySelector("h1").classList.toggle("anima");
}

либо так

document.querySelector("button").onclick = function(){
  document.querySelector("h1").classList.remove("anima");
  setTimeout(() => {
  document.querySelector("h1").classList.add("anima");
	}, 100);
	
}

[Анастасия]

Froggyweb, читал описание?

[Froggyweb]

Анастасия, Вообще класс надо добавлять после ответа сервера, а не в том же эвенте.

[Анастасия]

Froggyweb, значит не читал. Первая валидация у меня в JS. Вторая на сервере. Какого ответа мне дожидаться?

[Степан Крапивин]

что мешает слушать событие animationend и убирать класс с заголовка?

Answer 1

[Сергей Мельников]

const button = document.querySelector("button");
const target = document.querySelector("h1");
button.addEventListener("click", () => {
  target.classList.remove("error");  
  setTimeout(() => {
    target.classList.add("error");
  }, 0);
});

.error {
  animation: shake 350ms backwards ease-in-out;
  color: red;  
}

Comments

[Анастасия]

вы серьезно?

[Сергей Мельников]

Анастасия, добавил ссылку на пример

[Сергей Мельников]

Анастасия,

const button = document.querySelector("button");
const target = document.querySelector("h1");
button.addEventListener("click", () => {
  target.classList.remove("error");  
  setTimeout(() => {
    target.classList.add("error");
  }, 0);
});

Answer 2

[iBird Rose]

Comments

[Анастасия]

но это замедление работы

[Rustam Bainazarov]

Анастасия, замедление работы?

[Анастасия]

Рустам Байназаров, намеренно стопорить код на 100ms - это для вас норм?

[lUser L]

Анастасия, 100ms на клиенте это норма

[iBird Rose]

Анастасия, я это от балды написал. поставь туда хоть 1ms - тоже будет работать