Как подружить свойства display, opacity и transition?

Question

[SolidSnake13]

Мне нужно, чтобы элемент плавно появлялся из ниоткуда. Его изначальные стили:

transition: 'all 1s linear';
display: 'none';
opacity: 0;

При клике он должен появляться и становиться в:

display: 'block';
opacity: 1;

В моем коде он появляется резко и не плавно совсем:

this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           this.popupWindow.style.opacity = 1;        
 });

Я нашёл решение и спрятал прозрачность в setTimeout с 1/1000 долей секунды (и он действительно появляется плавно, как написано в css-свойстве transition):

this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           setTimeout(()=>{this.popupWindow.style.opacity = 1}, 1); 
});

Хоть моё решение и работает, оно эстетически мне не нравится и я хотел бы найти более правильный, элегантный и лаконичный вариант решения этой проблемы. Спасибо за внимание.

Comments

[Андрей]

С таймаутом вполне адекватный вариант, т.к. свойство display не анимируется. Есть еще вариант вместо display: none указать width: 0, height: 0, tranisiton: opacity 1s linear, но это еще больший костыль

Answer 1

[Антон Литвиненко]

Свойство display не анимируется. Использую так

.elem {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
} 

.elem.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

Плюс транзишн и трансформ если нужно

Answer 2

[Виталий Першин]

Если нужно анимировать появление, то можно использовать animation:

Answer 3

[WbICHA]

Если нужно использовать именно дисплей, то:

this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           setTimeout(() => { this.popupWindow.style.opacity = 1; }, 0);
 });