Плавное открывание элемента
 

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

Есть блок 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/

:-?
строки 132 и 185

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
<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: var(--hh, 530px);
    transition: height 2s 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>
<script>
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');
const onBurgerClick = () => {
    nav.style.setProperty('--hh', `${nav.scrollHeight}px`)
    nav.classList.toggle('nav--hide');
};

burger.addEventListener('click', onBurgerClick);

</script>
</body>
</html>