我正在使用TweenLite制作一些横幅广告。我的一切工作正常，但是我对如何选择元素感到困惑，或者至少是使用TweenLite选择元素的最佳实践。
起初我正在使用它：
var logo = document.getElementById("logo");
选择元素，然后用：
制作动画TweenLite.to(logo, .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
然而，我发现动画仍然有效，而没有将#logo声明为变量。
我的问题是，最好使用以下哪项？
var logo = document.getElementById("logo"); TweenLite.to(logo, .45,
{transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});
//声明变量和参考
TweenLite.to(logo, .45, {transform:"1,1", right:"19px"});
//不要将#logo声明为变量或使用＃引用徽标作为ID。不知道为什么会这样。
TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6,
ease:Quart.easeOut});
//脚本中的引用ID，无需创建或引用变量
或者除了使用额外的js库之外还有其他更好的选择我不知道吗？浏览器对所有这些都支持相同吗？
我正在从GSAP加载以下库： css插件 安慰包 TweenLite的
答案 0 :(得分：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});
答案 1 :(得分：0)
在我看来，最好的方法是创建变量。这样，如果你有动画，你总是可以调用变量，而不是重新输入id / class，GSAP再次搜索该对象。