[1111]

Здравствуйте,

Есть блок nav, который при нажатии на бургер должен оттолкнуть все ниже стоящее элементы с плавным открыванием, для этого я использую свойство heigth для nav в котором указываю высоту, но проблема в том, что могут добавляться пункты в nav, и тогда нужно в ручную пересчитывать высоту в свойстве height (если указать height: auto; то transition не срабатывает).
Получить высоту через Js я тоже не могу, т.к. при загрузки страницы, nav скрытый.

Вопрос: Как можно сделать плавное открывание меню и чтобы оно работало при любом количестве элементов в nav?

<header class="header">
  <div class="burger">
        <span class="burger__icon"></span>
    </div>
    <div class="logo">
        <a class="logo__link" href="/">
            <img src="#" alt="Logo" class="logo__img" width="100" height="26">
        </a>
    </div>
    <nav class="nav nav--hide">
        <ul class="nav__list">
            <li class="nav__item">
                <a class="nav__link" href="#">Оплата и доставка</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">Контакты</a>
            </li>
        </ul>
        <p class="nav__caption">Caption 1</p>
        <ul class="nav__list">
            <li class="nav__item">
                <a class="nav__link" href="#">1</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">2</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">3</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">4</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">5</a>
            </li>
        </ul>
        <p class="nav__caption">Caption 2</p>
        <ul class="nav__list">
            <li class="nav__item">
                <a class="nav__link" href="#">1</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">2</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">3</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">4</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">5</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">6</a>
            </li>
            <li class="nav__item">
                <a class="nav__link" href="#">7</a>
            </li>
        </ul>
    </nav>
</header>
<style>
img {
	max-width: 100%;
  height: auto;
}

.header {
  position: relative;
  max-width: 1440px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.burger {
  position: absolute;
  top: 7px;
  width: 30px;
  height: 21px;
  padding-left: 5px;
  cursor: pointer;
}

.burger__icon {
  width: 30px;
  height: 2px;
  background-color: #8978B7;
  display: block;
}

.burger__icon::before,
.burger__icon::after 
{
  content: "";
  position: absolute;
  top: 9px;
  width: 30px;
  height: 2px;
  background-color: inherit;
  display: block;
}

.burger__icon::after {
 top: 19px; 
}

.burger:hover {
  opacity: 0.5;
}

.logo {
	width: 100%;
  padding: 10px 0;
  margin: 0;
  text-align: center;
  border-bottom: 1px solid #8978B7;
}

.nav {
  width: 100%;
  height: auto;
  transition: height 500ms linear;
  overflow: hidden;
}

.nav--hide {
  height: 0px;
}

.nav__caption {
  background-color: #474F80;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
}

.nav__list {
  padding: 0;
  margin: 0;
	list-style-type: none;
  text-align: center;
}

.nav__item {
  border-bottom: 1px solid #8978B7;
  padding: 5px 0;
}

.nav__item:last-child {
	border-bottom: none;  
}

.nav__link {
	text-decoration: none;
  color: #8978B7;
}

.nav__link:hover {
  opacity: 1;
  color: #423663;
}
.nav__link:active {
  opacity: 0.5;
}
</style>

const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');
const onBurgerClick = () => {
  nav.classList.toggle('nav--hide');
};

burger.addEventListener('click', onBurgerClick);

jsfiddle
https://jsfiddle.net/4vpyq369/1/