Почему не анимируется первое появление элемента?

Question

[lavezzi1]

Здравствуйте! Помогите понять причину того, что при первом появлении элемента (тултипа) его появление не анимируется. Я понимаю, что это происходит из за 7 строчки js кода, где я добавляю на лету положение тултипа и что, скорее всего, анимация translate скипается потому что его как бы изначально не было. Кажется, нужно сделать reflow после добавления атрибута и затем добавить класс для анимации?

Вот демка: https://codesandbox.io/s/condescending-driscoll-r2qrnq

Буду благодарен за любые советы по исправлению.

(это минимальный пример проблемы выдранный из сложного компонента).

Comments

[Beliyadm]

Просто добавьте к изначальному классу тултипа out, чтобы они изначально был сдвинут на -5
<div class="tooltip out">Hello world!</div>

[lavezzi1]

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

[lavezzi1]

В реальном коде его устанавливает popperjs динамические в зависимости от доступности места и тд

[lavezzi1]

обновил пример

Answer 1

[Антон Романков]

А почему бы не реализовать так, чтобы тултип уже был в нужной позиции, а управлять надо было бы только его opacity и translateX? Тогда такой проблемы не будет.