[ JavaScript / jQuery ] 애니메이션

1. jQuery를 사용하면 애니메이션을 쉽게 만들 수 있다.

<script>
	$('#show-menu').click(function(){
		$('.left-menu').animate({marginLeft : '0px'});
	})
</script>

 

2. 애니메이션 만드는 방법
    1) 시작화면/최종화면 만들기
    2) 자바스크립트로 트리거하기
    3) 스무스한 동작은 animate 함수 사용 

        (but, 요즘엔 잘 안씀. 요즘엔 CSS transition 속성을 씀. 이게 훨 성능이 좋기 때문)

3. 애니메이션 성능 높이는 3가지 방법
    1) animate()말고 CSS transition을 사용하자

.black-ground {
	transition: all 1s; // 모든 CSS 속성을 1초에 걸쳐 적용함
}

    2) margin 속성 말고 transform 속성을 쓰자
        margin은 레이아웃을 바꾸기 때문에 성능 저하가 많음
        translate(), rotate(), scale() 얘네들이 많이 쓰인다

    3) 가독성을 위해 css() 함수를 바로 쓰는 대신 addClass(), removeClass() 함수를 사용하자
        즉, JavaScript에서 CSS 쓰지 말라는 이야기