JQuery animate()함수를 안 쓰는 이유
[1. transition VS animate]
jQuery의 animate()함수로 애니메이션을 주게 되면 매우 느리고 천천히 동작합니다.
컴퓨터가 좋아서 빠르게 동작하는 것 같아 보이는 것이지 애니메이션이 조금만 복잡하거나 많으면 금방 버벅입니다.
특히 여러분이 자바스크립트로 많은 일을 해야하는 SPA 같은 사이트를 만든다면 애니메이션 자바스크립트로 넣으면 안됩니다.
그러니 자바스크립트가 할 일이 많아도 빠르게 동작하는 css transition을 씁시다.
(혹은 애니메이션 전용 라이브러리 velocity.js 등을 따로 설치해서 쓰시면 실행 속도 걱정은 해결됩니다.)
[오늘날 애니메이션 웹페이지 동작 만드는 순서]
1. 애니메이션 효과가 적용될 html 속성 만들기
2. 자바스크립트로 트리거 하기
3. 스무스한 동작 즉 애니메이션 효과는 css trainsition을 이용해 구현하기
[애니메이션 구현할때 margin말고 transform속성을 쓰자]
- margin, width, height, top, left, bottom, right 이런 CSS 속성들은 페이지 레이아웃을 변경하는 속성입니다.
- 브라우저는 레이아웃을 변경하면 렌더링시간이 매우 오래걸립니다.
- transform, opacity 이런 속성들은 페이지 레이아웃과는 상과없는 속성입니다.
결론:
스무스하게 동작하는 애니메이션을 만들고 싶다면 레이아웃을 변경하는 속성이 아닌 속성들로 동작을
추가하는게 좋다.
(왜 속도가 빠른지 궁금하면 '브라우저의 css 렌더링 단계'라는걸 공부해보시면 되겠습니다.)
[javascript로 트리거 할때 class를 붙이는 방식으로 개발하자]
jQuery의 css() 함수는 inline 형태로 스타일이 부여됩니다. inline형태는 2가지 제약이 있는데
1. 코드와 스타일이 분리되지 못하여 유지보수에 제약이 있다
2. 인라인으로 적용된 스타일을 변경시 !important 키워드가 필요하게 된다.
이런 단점들 때문에 class에 css 스타일을 미리 정해두고 이 클래스를 javascript로 필요할때 추가하거나 제거하는 방법이
훨씬 유지보수에 용이합니다.
jQuery class 제어 함수
- addClass()
- removeClass()