Почему при удалении и добавлении класса css анимация не повторяется?
Здравствуйте. Почему анимация не повторяется при каждом нажатии? И как сделать, чтоб анимация повторилась?
https://jsfiddle.net/nastya97core/x7rbem1o/ В жизни у меня немного другая картина: Есть форма и есть валидация полей на js. При нажатии на отправку формы, поля, которые не прошли валидацию должны быть анимированы. При повтором нажатии, анимация должна повториться. И в итоге у меня после нажатие на отправку формы удаляется класс, затем валидация и класс снова добавляется, однако анимации нет... |
nastya97core,
два варианта простых решения что - то измерить на странице, перед добавлением класса. или перенести добавление в setTimeout. есть третий но я его не знаю ))). |
рони,
но этож какое-то намеренное замедление работы. Зачем что-то считать, когда считать не нужно?) setTimeout тоже как-то странно. А если бы у меня таких 10 моментов было, то привет задержка в 1 секунду? Потом люди жалуются: чё это у нас так всё медленно работает, а это оказывается код из setTimeout состоит. Не удивлюсь, если в android или ios такое есть... |
Цитата:
|
Цитата:
|
Цитата:
|
вариант добавления класса с помощью setTimeout
Цитата:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form.err .anima{
animation:anima 350ms backwards ease-in-out;
color: red;
}
@keyframes anima {
from {transform: translateX(0);}
20% {transform: translateX(1%);}
40% {transform: translateX(-1%);}
60% {transform: translateX(1%);}
80% {transform: translateX(-1%);}
to {transform: translateX(0);}
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let timer;
document.querySelector("button").onclick = function(){
clearTimeout(timer);
document.querySelector("form").classList.remove("err");
timer = setTimeout(()=> document.querySelector("form").classList.add("err"))
}
});
</script>
</head>
<body>
<form action="http://">
<h1 class="anima">Анимация</h1>
<h1 class="anima">Анимация</h1>
<h1 class="anima">Анимация</h1></form>
<button>Жмай</button>
</body>
</html>
|
вариант добавления класса с помощью измерения
nastya97core,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.anima {
animation: anima 350ms backwards ease-in-out;
color: red;
}
@keyframes anima {
from {transform: translateX(0);}
20% {transform: translateX(1%);}
40% {transform: translateX(-1%);}
60% {transform: translateX(1%);}
80% {transform: translateX(-1%);}
to {transform: translateX(0);}
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
document.querySelector("button").onclick = function(){
document.querySelector("h1").classList.remove("anima");
document.documentElement.clientWidth;
document.querySelector("h1").classList.add("anima");
}
});
</script>
</head>
<body>
<h1>Анимация</h1>
<button>Жмай</button>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:30. |