使用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

在我看來，最好的方法是通過創建變量。這樣，如果你有一個動畫，你可以隨時調用變量，而不是重新輸入id/class，其中GSAP正在再次搜索該對象。