<ul class="list-group "> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">A fourth item</li> <li class="list-group-item">And a fifth one</li> </ul> <p class="hello">안녕</p> <script> $(".hello").html("바보"); document.getElementsByClassName("navbar-toggler")[0].addEventListener('click',function(){ document.getElementsByClassName('list-group')[0].classList.toggle('show'); })</script>
.list-group { display: none; overflow: hidden; animation-duration: 1.5s; animation-name: slidein; } @keyframes slidein { from { height: 0; } to { height: 205.5px; } } @keyframes slideout { from { height: 205.5px; } to { height: 0; } } .show { display: block; overflow: hidden; animation-duration: 1.5s; animation-name: slideout; }
navbar를 내릴 시에 slidein 애니메이션을 주고
navbar를 올릴 시에 slideout 애니메이션을 주고싶었는데
둘 중 하나만 적용이 된다..