Какой ваш вариант анимирования из display: none?

Question

[djEban]

transition: opacity 300ms ease-in;

<div class="node-wrapper">
  <div class="node" />
</div

У меня вот есть два варианта:

1.

const node = document.querySelector(".node");
node.style.display = "block";
// force layout
node.offsetHeight;
node.style.opacity = "1";

2.

const node = document.querySelector(".node");
const nodeWrapper = document.querySelector(".node-wrapper");
node.style.display = "block";
nodeWrapper.style.opacity = "1";

Второй вариант явно лучше, так как нет лишней перекомпоновки
А как сделали бы вы? Интересно узнать другие подходы
P.S. лучше использовать классы, но мне лень

UPD:
через keyframes можно, предварительно задав display block элементу

Answer 1

[Владислав Лысков]

Еще через visibility

Answer 2

[zephire]

Я бы сделал opacity: 0 по opacity: 1, предварительно добавив css свойство блоку pointer-events: none; чтобы не реагировал на нажатие при opacity: 0, После того как будет opacity: 1 уже вернуть pointer-events: pointer-events: all;