Как запускать анимацию по ключевым кадрам несколько раз (при каждом событии размытия)?
Я определил такую простую анимацию:
@keyframes fullScale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
и прикрепил его к классу CSS:
.updated-animation {
animation: fullScale 0.3s ease-in;
}
затем я попытался динамически добавить / удалить этот класс к элементам, которые необходимо анимировать всякий раз, когда пользователь теряет фокус. Итак, я использовал onblur = "update(this);" для этих HTML-элементов. Код jquery можно увидеть ниже:
function update(element) {
$(element).removeClass('updated-animation');
$(element).addClass('updated-animation');
}
Анимация работает должным образом только для первого события размытия.
Однако последующие события не запускают анимацию, даже если прослушиватель событий вызывается каждый раз, и я продолжаю удалять и повторно добавлять класс. Что не так с кодом? Как можно использовать эффект анимации более одного раза по запросу?
В первый раз у него даже нет класса updated-animation. Так что это никак не влияет на его удаление. Как вы думаете, мне следует добавить тайм-аут между ними? Когда я пробую то же самое на консоли, он работает, как ожидалось, что действительно странно ...
Я не понимаю того, что вы пытаетесь сделать. Тайм-аут, похоже, не имеет никакого значения - проблема в том, что вы меняете состояние при размытии, а затем сразу же снова возвращаете его в предыдущее состояние. Почему ты бы так поступил? Конечно, вам нужны функции: один при размытии, чтобы удалить класс, и пыльник при наведении, чтобы добавить его
Это не связано с наведением курсора. Я хочу, чтобы элемент анимировался только при потере фокуса. Но анимация должна воспроизводиться каждый раз, когда происходит одно и то же событие, поэтому я пытаюсь сбросить свойство анимации CSS, удалив и снова добавив класс.
Похоже, время все-таки было проблемой. Я попытался добавить небольшую задержку перед повторным применением класса, и теперь он работает должным образом. setTimeout (() => {$ (element) .addClass ('обновленная-анимация');}, 200);
Вы удаляете класс, а затем сразу же добавляете его снова, поэтому я немного удивлен, что он вообще работает в первый раз. Не могли бы вы отредактировать вопрос, включив в него полный образец HTML и CSS.