1. 네비게이션 바 만들기 : transition overflow

 1. HTML로 NAVBAR와 LIST 준비

<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" id="test1">
	<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>

<script>
	/* in case using jquery
        $('.navber-toggler').on('click', function(){
            $('.list-group')[0].toggle('show');
        });
        */
        
        document.querySelector('.navbar-toggler').addEventListener('click', function(){
            document.querySelectorAll('.list-group')[0].classList.toggle('show');
        });
        
</script>

2. CSS

.list-group{
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
}

.show{
    max-height: 300px;
    transition: max-height 1s ease-in;
}

---

overflow : hidden 과 transition: max-height 1s ease-out / ease-in

1. overflow : hidden

overflow CSS 단축 속성은 요소의 컨텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다. 

overflow: hidden 콘텐츠가 요소의 블록 서식 맥락에 맞출 수 없을때 가려준다.

 

2. transition

transition CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법이다. 속성 변경이 즉시 영향을 미치게 하지 않고 그 속성의 변화가 일정기간에 걸쳐 일어나도록 할 수 있다.

 

TIP. One-way transition의 경우

•  시작 스타일을 만든다.(class로)
•  최종 스타일을 만든다.(class로)
•  원할 때 최종스타일로 변하라고 JS코드를 짠다.
•  시작 스타일에 transition 추가

transition: max-height 1s ease-out / ease-in '콘텐츠를 1초동안 서서히 max-height만큼만 보여줘라.' 라는 뜻