UI 애니메이션 만들기 transition 속도?

자바스크립트 8강 UI 애니메이션 만들기 강의를 듣고있습니다.
모달창을 transition 으로 fade-in/out 하는 부분까지는 정상적으로 잘 완성했습니다
강의 마지막부분에서 navbar 서브메뉴를 위에서 아래로 내려오게 해보라는 내용이 있습니다
그래서 한번 만들어 보았더니 서브메뉴가 나오는 부분에서는 한번에 슉 하고 내려오지만
서브메뉴가 닫히는 과정에서 한박자 쉬고 올라갑니다 저 한박자 쉬는 부분은 왜그런건가요

--------------html

<nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

      <ul class="list-group">
        <li class="list-group-item">An item
        <li class="list-group-item">A second item
        <li class="list-group-item">A third item
        <li class="list-group-item">A fourth item
        <li class="list-group-item">And a fifth one
      

--------------js

$('.navbar-toggler').on('click', function() {
            $('.list-group').toggleClass('show')
        })

--------------css

.list-group {
    max-height: 0vh;
    overflow: hidden;
    transition: all 1s;
}

.show {
    max-height: 100vh;
    overflow: hidden;
}

추가로 max-height 부분도 height로 했을때 펼쳐진 높이를 몰라서 구글링해서 복붙해온건데
왜 이해가 잘 되지 않습니다