모달창 띄우기와 간단한 애니메이션

안녕하세요 선생님
모달창을 애니메이션 적용해서 띄우는 것 까지는 성공했는데 숙제로 내주신
서브메뉴가 접혔다 펼쳐지듯 애니메이션 주는게 잘 안되서 질문 드립니다
일단 height 속성을 써보기는 했는데 이렇게 주는게 맞는건지 모르겠습니다
애니메이션이 먹히지를 않고 그냥 버튼 누르면 팍 나타났다 팍 사라집니다
HTML, javascript, CSS순으로 코드 짠 것입니다

------------------------------------------------------------------------------------

  <div class="black-bg">
    <div class="white-bg">
      <h4>로그인하세요</h4>
      <button class="btn btn-danger" id="close">닫기</button>
    </div>
  </div>

  <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
  

<button id="login">로그인</button>

------------------------------------------------------------------------------------

    document.querySelector('.navbar-toggler').addEventListener('click', function () {
      document.querySelectorAll('.list-group')[0].classList.toggle('show');
    })

------------------------------------------------------------------------------------

.list-group {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: height 1s;
}

.show {
  visibility: visible;
  height: 400px;
}
------------------------------------------------------------------------------------

제가 짠 코드는 이렇습니다 고쳐야 할 부분 알려주시면 감사하겠습니다