Существует ли менее топорный способ описания появления скрытого блока?

Question

[Muranx]

Здравствуйте! Есть блок, который скрыт ( причем не с помощью visibility : hidden или opacity : 0) а именно целенаправленно через display : none. Есть необходимость чтобы он появлялся ПЛАВНО при клике по другому элементу ( ну например кнопке, в примере который я вам приведу при клике ПО тексту расположенному под срытым блоком ) ! Но если просто прописывать в скрипте

. .onclick = ( ) => { element.style.display = ' block '}

то он разумеется появляется резко, даже если после этой фразы прописать element.style.opacity = 1 ( ну разумеется у скрытого блока в css свойства прописан transition : . . . для плавного появления ) .

<div class="wrapper"> 
  <div class="hidden-block"></div>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>

.wrapper{
  width: 150px;
  height: 150px;
  border: 1px solid;
  word-wrap: break-word;
}

.hidden-block{
  width: 100px;
  height: 100px;
  background: red;
  display: none;
  opacity: 0;
  transition: all 1.5s;
}

let hb = document.querySelector('.hidden-block'),
    text = document.querySelector('.text');

text.addEventListener('click', e=>{
    hb.style.display = 'block';
    setTimeout(()=>{
       hb.style.opacity = 1;
    }, 100);
});

Мой вариант с setTimeout( ) попахивает , т.к. это доп функция засерающая стэк не нужная, уверен более опытные чем я могут подсказать как это реализовать красиво, без костылей ! Кста, мой скрипт работает именно так, как мне нужно ( для сведения ), вопрос лишь в реализации ! Благодарю заранее за ответы !

Answer 1

[Николай]

Если у блока нет внутренних отступов, например padding, то хорошо сыграет комбинация (добавить), когда он еще закрыт:

.hidden-block {
 overflow: hidden;
 max-height: 0;
}

А чтобы открылся просто max-height увеличить или по известной высоте, или примерно)) Так он плавно раскроется.