Как применить стили окончания анимации, не воспроизводя анимацию?

Question

[Alianos]

Необходимо, чтобы элемент имел класс анимации, но анимация не воспроизводилась, при этом элемент имел стили, применяемые по окончанию анимации.

Comments

[Alice]

анимацыя (╯°□°）╯︵ ┻━┻

Answer 1

[0xD34F]

Можно сбросить в 0 продолжительность выполнения анимации: transition-duration: 0ms;.
Или вообще убрать её: transition: none;.

Как это будет выглядеть на практике: определяете в стилях класс, который убирает анимацию, в компоненте определяете свойство, в зависимости от значения которого класс будет назначаться элементу. Надо, чтобы анимация воспроизводилась - устанавливаете свойству значение true, не нужна анимация - false. Как-то так.