Здравствуйте!
Вы можете посмотреть
Рабочий пример
Дело в том, что если вы используете
display: none/flex, плавной анимации не будет.
В примере выше, мы используем значение высоты (как и у вас), только добавляем самому меню
overflow: hidden, чтобы скрыть содержимое.