使用TweenSite/GSAP选择DOM对象的最佳方式

Best way to select DOM object using TweenLite/GSAP?

本文关键字：对象 最佳 方式 DOM 选择 TweenSite GSAP 使用      更新时间：2023-09-26

我正在使用TweenSite构建一些横幅广告。我一切都很好，但我有点困惑如何选择元素，或者至少是使用TweenSite选择元素的最佳实践。

起初我使用的是：

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

选择元素，然后使用设置动画

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

然而，我发现动画在没有将#徽标声明为变量的情况下仍然有效。

我的问题是，以下哪一项最好使用

  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声明为变量，也不要使用#引用logo作为ID。不确定为什么这样做有效。

  3. TweenLite.to("#logo", .45, {transform:"1,1", right:"19px", delay:.6, ease:Quart.easeOut});//在脚本中引用ID，而不创建或引用变量

或者，除了使用额外的js库之外，还有其他我不知道的更好的选择吗？浏览器对所有这些的支持是否相同？

我正在从GSAP加载以下库：css插件简易背包花呢石

您所说的"最佳方式"是什么意思还不清楚。你的意思是表演友好的方式？还是用户友好的方式？在整体编程中，尽可能直接。不要创建不必要的变量（这样可以避免内存泄漏，性能也会更好）。

如果您不愿意只为单个青少年使用徽标对象，请使用变量作为存储：

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

Greenstock选择器很优雅，但它必须处理字符串才能选择对象：

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});

在我看来，最好的方法是创建变量。这样，如果你有一个动画，你可以总是调用变量，而不是重新键入id/class，GSAP在其中再次搜索对象。

相关文章：