TweenLite/GSAP를 사용하여 DOM 객체를 선택하는 가장 좋은 방법은 무엇입니까?

Question

나는 배너 광고를 만들기 위해 TweenLite을 사용하고 있습니다. 모든 것이 제대로 작동하지만, 요소가 어떻게 선택되는지 혼란 스럽거나 적어도 TweenLite를 사용하여 요소를 선택하는 가장 좋은 방법입니다. 처음에는

내가이 사용되었습니다

var logo = document.getElementById("logo"); 

과 함께 애니메이션 다음 요소를 선택하고 그러나

TweenLite.to(logo, .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut}); 

, 나는 애니메이션이 여전히으로 #logo을 선언하지 않고 작동하는 것을 발견 변하기 쉬운.

내 질문에 다음 중 무엇을 사용하는 것이 가장 좋습니까?

1. var logo = document.getElementById("logo"); TweenLite.to(logo, .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut}); // 변수 선언 및 참조

2. TweenLite.to(logo, .45, {transform:"1,1", right:"19px"}); // 변수를 #logo 선언 또는 ID로 로고를 참조하는 #를 사용하지 마십시오. 왜 이것이 작동하는지 잘 모르겠습니다.

3. TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut}); // 참조 ID 작성하거나 변수

를 참조 또는없이 스크립트 JS 추가 라이브러리를 사용에서 내가 제외하고, 잘 모르는 것 같아요 것이 좋을 것이다 또 다른 옵션이 ? 이 모든 것에 대해 브라우저 지원이 동일합니까?

나는 GSAP에서 다음 라이브러리를로드 해요 : CSS 플러그인 쉽게 팩 tweenlite

Answer 1

당신이 "가장 좋은 방법"에 의해 의미합니까 무엇 분명하지 않다. 성능 친화적 인 방법을 의미합니까? 아니면 사용자 친화적 인 방법? 전반적인 프로그래밍에서 가능한 한 직접적으로하십시오. 불필요한 변수를 만들지 마십시오 (메모리 누수를 피하고 성능이 향상됩니다). 당신은 단지 하나의 트윈 로고 객체를 사용하고자하지 않는 스토리지로 변수를 사용하는 경우

:

var logo = document.getElementById("logo"); 
TweenLite.to(logo, .45, {transform:"1,1", right:"19px"}); 

Greensock 선택은 우아하지만, 객체를 선택하기 위해 문자열을 처리해야합니다

TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut}); 

을 당신은 단지이 하나의 트윈 로고 객체를 사용하여 성능 친절하고자하는 경우

, 직접 수 :

TweenLite.to(document.getElementById("logo"), .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut}); 

Answer 2

제 생각에는 최선의 방법은 변수를 만드는 것입니다. 이 방법은 애니메이션이있는 경우 GSAP가 객체를 다시 검색하는 id/class를 다시 입력하는 대신 항상 변수를 호출 할 수 있습니다.