자바스크립트 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로 했을때 펼쳐진 높이를 몰라서 구글링해서 복붙해온건데
왜 이해가 잘 되지 않습니다
