모달창만들기와 간단한 애니메이션에 아코디언 메뉴 질문

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
  

css

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

.on {
  height: 400px;
  overflow: visible;
}

js

document.querySelector('.navbar-toggler').addEventListener('click', function(){
document.querySelector('.list-group').classList.toggle('on');
})

Q. 서브메뉴가 접혔다 펴지는 애니메이션은 어떻게 만들까요? 
이 부분을 작업해봤는데요 !!
버튼을 한번 클릭시 애니메이션 적용이 안된 상태로 반짝 뜨고 한번 더 클릭하면 의도한 대로 위로 스르륵 접히면서 
애니메이션이 작동합니다 ! 
왜 메뉴를 닫을때는 작동하고 처음 들어와서 메뉴를 보이게 하려고할 땐 애니메이션이 작동 안하는지 궁금합니다 쌤 ㅠㅡㅠ,,