Почему не работает анимация? CSS JS?

Question

[chtopisatsuda]

Здрасвуйте. У меня не работает анимация в css. вот код:

style.css

@keyframes fly-out-in {
    0% {
        transform: translate(0%, 0%);
    }
    49% {
        transform: translate(175%, -175%);
    }
    50% {
        transform: translate(-175%, -175%);
    }
    51% {
        transform: translate(-175%, 175%);
    }
    100% {
        transform: translate(0%, 0%);
    }

}

.add-panel_button.sending .svg
{
    animation: fly-out-in calc(var(--animation-duration) * 1ms) ease-in-out;
}

script.js

addTodoButton.addEventListener('click', () => {
    addTodoButton.classList.add('sending');
    const style = window.getComputedStyle(addTodoButton);
    let duration = style.getPropertyValue('--animation-duration');
    duration = parseFloat(duration);
    setTimeout(() => {
        addTodoButton.classList.remove('sending');
    }, duration);
    addItem();
});

Answer 1

[Dino Winchester]

Анимация не работает потому что в переменной --animation-duration скорее всего содержится <число>ms. Если указать только число, то всё будет работать.

Однако зачем такие calc(var(--animation-duration) * 1ms) сложности? Неужели не проще написать напрямую время анимации или пусть даже в переменной, но без calc() и прочего? Для чего лишние вычисления и прочие операции? Не нужно ничего усложнять.

Можно написать намного проще.

Указываем нужное время анимации в переменной:

--animation-duration: 500ms;

Используем без всяких наворотов и лишних движений:

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

В скрипте тоже содержится достаточно лишнего кода. Вместо setTimeout можно прослушивать событие animationend на нужном элементе и тогда лишние вычисления станут реально "лишними" и их можно будет удалить.

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});

Comments

[chtopisatsuda]

Спасибо

Answer 2

[Николай Алексеев]

animation: fly-out-in calc(var(--animation-duration) * 1ms) ease-in-out; - почему именно значение 1ms? Может быть поэтому вам кажется, что не работает) соглашусь с Mizutsune