안녕하세요 선생님
모달창을 애니메이션 적용해서 띄우는 것 까지는 성공했는데 숙제로 내주신
서브메뉴가 접혔다 펼쳐지듯 애니메이션 주는게 잘 안되서 질문 드립니다
일단 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;
}
------------------------------------------------------------------------------------
제가 짠 코드는 이렇습니다 고쳐야 할 부분 알려주시면 감사하겠습니다
