Форум

nastya97core · #1 (**permalink**) 06.05.2020, 21:58

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

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

рони · #2 (**permalink**) 06.05.2020, 22:23

nastya97core,
два варианта простых решения
что - то измерить на странице, перед добавлением класса.
или перенести добавление в setTimeout.
есть третий но я его не знаю ))).

nastya97core · #3 (**permalink**) 06.05.2020, 22:36

рони,
но этож какое-то намеренное замедление работы. Зачем что-то считать, когда считать не нужно?) setTimeout тоже как-то странно. А если бы у меня таких 10 моментов было, то привет задержка в 1 секунду?

Потом люди жалуются: чё это у нас так всё медленно работает, а это оказывается код из setTimeout состоит. Не удивлюсь, если в android или ios такое есть...

рони · #4 (**permalink**) 06.05.2020, 22:37

Сообщение от nastya97core

Почему

потому что не было у страницы времени нарисовать состояние без класса.

рони · #5 (**permalink**) 06.05.2020, 22:39

Сообщение от nastya97core

то привет задержка в 1 секунду?

так не ставьте никакой задержки, браузер успеет нарисовать

рони · #6 (**permalink**) 06.05.2020, 22:42

Сообщение от nastya97core

А если бы у меня таких 10 моментов было

тогда нужно 10 переменных. или перенести активацию на форму. а не на 10 элементов.

рони · #7 (**permalink**) 06.05.2020, 22:49

Сообщение от nastya97core

А если бы у меня таких 10 моментов

<!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>

рони · #8 (**permalink**) 06.05.2020, 22:52

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>

Форум

Справочник

Discord чат

Курсы javascript