Как можно обойти setTimeout для срабатывания transition?

Question

[Muvka]

Пытаюсь сделать анимацию октрытия меню на css переменной и transition. Высота блока может быть разной. Поэтому я вычисляю высоту блока и прописываю ее в css переменную. Но проблема в том, что если запускать анимацию, т.е. добавить нужный класс сразу, после установки переменной, анимация не проигрывается. Работает только через setTimeout с задержкой в 20мс. Можно ли как-то без таймаута обойтись?

this.$menu.style.maxHeight = 'none';
const height = this.$menu.offsetHeight;
this.$menu.style.maxHeight = '';
this.$menu.style.setProperty('--height', `${height}px`);

setTimeout(() => {
   this._startOpenAnimation()
     .then(() => {
       this.blocked = false;
       this.opened = true;
    });
}, 20);

_startOpenAnimation просто добавляет классы и возвращает промис.

Answer 1

[WapSter]

Привяжите @keyframe к классу и используйте свойство animation, а не transition

Comments

[Muvka]

Спасибо. Почему то в голову не пришла информация про анимацию...

[WapSter]

Muvka, а вообще странно почему transition, не применяется, можно кусок блока нужного выложить в песочницу?