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

287

25 июля 2022, 20:40

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

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); 
});

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

Answer 1

Если есть возможность display: none/block заменить на height: 0/X Можно решить с помощью transition и подмены классов

window.onload = () => {
  var btn = document.getElementById('toggleBtn');
  var elem = document.getElementById('elem');
  
  btn.addEventListener('click', () => {
    if (elem.classList.contains('hide')) {
      elem.classList.remove('hide');
      elem.classList.add('show');
    } else {
      elem.classList.add('hide');
      elem.classList.remove('show');
    }
  });
}

#elem {
  opacity: 1;
  height: 20px;
   overflow: hidden;
}
#elem.hide{
  height: 0;
  opacity: 0;
  transition: opacity 2s ease, height 0s ease 2s;
}
#elem.show{
  transition: opacity 2s ease, height 0s ease 0s;
}

<div id="elem" class="show">TEXT</div>
<button id="toggleBtn">togglr</button>

Answer 2

<div class="div-1">
  OPEN
  <div class="div-2">XEXE</div>
</div>
.div-2 {
  height: 0;
  background-color: #000;
  color: #fff;
  padding: 20px;
  visibility: hidden;
  transition: opacity 1s;
  opacity: 0;
}
.div-1:hover .div-2 {
  visibility: visible;
  opacity: 1;
  height: auto;
}