一、gsap.context()提供了兩個(gè)關(guān)鍵好處：

• 收集在提供的函數(shù)中創(chuàng)建的所有GSAP動(dòng)畫和ScrollTriggers，以便您可以輕松地一次性將它們?nèi)縭evert() or kill()。不需要跟蹤一堆變量、數(shù)組等。這在React模塊或任何你需要通過將元素恢復(fù)到原始狀態(tài)來“清理”的地方特別有用。
• [可選]將所有選擇器文本設(shè)置為特定的元素或Ref.這可以幫助簡(jiǎn)化你的代碼，避免在React/Angular中創(chuàng)建大量的Ref。在提供的函數(shù)中，任何與gsap相關(guān)的選擇器文本將只應(yīng)用于Element/Ref的后代。

假設(shè)你有一大塊GSAP代碼，它正在創(chuàng)建一堆不同的動(dòng)畫，你需要能夠?qū)⑺鼈內(nèi)窟€原()…

let ctx = gsap.context(() => {
 gsap.to(...);
 gsap.from(...);
 gsap.timeline().to(...).to(...);
 ...
});
// 然后
ctx.revert(); // BOOM! 在該函數(shù)中創(chuàng)建的每個(gè)GSAP動(dòng)畫都將恢復(fù)!

二、選擇器文本作用域：

你可以選擇傳入一個(gè)Element或React Ref或Angular ElementRef，然后所提供函數(shù)中的所有選擇器文本都將被限定在特定的Element/Ref上，這可以極大地簡(jiǎn)化你的代碼。不再為你想要?jiǎng)赢嫷拿總€(gè)元素創(chuàng)建Ref !

let ctx = gsap.context(() => {
  gsap.to(".box", {...}) // <- 正常的選擇器文本，自動(dòng)作用域到myRefOrElement
  gsap.from(".circle", {...}); 
}, myRefOrElement); // <- scope!!!

作用域可以是選擇器文本本身，如".myClass"?；蛘咭粋€(gè)元素，React Ref或Angular的ElementRef。

三、添加到上下文：

也許你需要設(shè)置事件處理程序(比如鼠標(biāo)點(diǎn)擊)來創(chuàng)建新的動(dòng)畫，這些動(dòng)畫也應(yīng)該被收集到上下文中，但顯然這些事件將在上下文的函數(shù)已經(jīng)執(zhí)行之后發(fā)生。沒問題!你可以將自己的方法添加到Context對(duì)象中，這樣當(dāng)它們運(yùn)行時(shí)，它們會(huì)自動(dòng)將任何生成的GSAP動(dòng)畫/ScrollTriggers添加到Context中:

let ctx = gsap.context((self) => {
  //使用任意字符串作為名稱;它會(huì)被添加到Context對(duì)象中，所以在這種情況下你可以調(diào)用ctx.onClick()
  self.add("onClick", (e) => {
    gsap.to(...); // <-- 被添加到上下文!
  });
}, myRefOrElement);

// 現(xiàn)在Context有了一個(gè)onClick()方法，我們可以使用該方法，該函數(shù)中的任何動(dòng)畫都會(huì)被添加到Context中
myButton.addEventListener("click", (e) => ctx.onClick(e));

或者你可以像這樣直接向Context中添加內(nèi)容(作為第一個(gè)參數(shù)):

// 先創(chuàng)建好上下文
let ctx = gsap.context(() => {...});

// 之后再添加到上下文
ctx.add(() => {
  gsap.to(...); // 現(xiàn)在所有這些都被添加到Context中。
  gsap.from(...); 
});

四、清理函數(shù)：

您可以選擇返回一個(gè)“清理函數(shù)”，如果/當(dāng)上下文恢復(fù)時(shí)應(yīng)該調(diào)用該函數(shù)。這可以包含你自己的自定義清理代碼:

let ctx = gsap.context(() => {
  ...
  return () => {
    //我的自定義清理代碼。在觸發(fā)ctx.revert()時(shí)調(diào)用。
  };
});

你也可以在任何.add()函數(shù)中返回一個(gè)清理函數(shù);當(dāng)Context的revert()被調(diào)用時(shí)，它們都將被調(diào)用。

五、忽略特定的animations/ScrollTriggers

在非常不常見的情況下，你可能想要在函數(shù)內(nèi)部創(chuàng)建某些GSAP動(dòng)畫和/或ScrollTriggers，這些動(dòng)畫應(yīng)該從上下文中排除(當(dāng)上下文被恢復(fù)/殺死時(shí)不被恢復(fù)/殺死)，在這種情況下，你可以像這樣使用ignore():

let ctx = gsap.context((self) => {
  gsap.to(...); // <- 將得到恢復(fù)當(dāng)ctx.revert()被調(diào)用的時(shí)候
  self.ignore(() => {
    gsap.to(...); // <- 當(dāng)ctx.revert()被調(diào)用時(shí)將不會(huì)被恢復(fù)。忽略，沒有記錄在上下文中。
  });
});

六、小秘訣：

• 當(dāng)在Context上調(diào)用revert()時(shí)，它對(duì)于它包含的動(dòng)畫/ScrollTriggers是永久的。它們將被還原并殺死，Context將自己清除，使它們符合垃圾收集的條件。但是在此之后仍然可以添加更多的動(dòng)畫，并且可以在相同的Context上再次調(diào)用revert()來revert/kill這些動(dòng)畫。
• Context并不是用來控制動(dòng)畫的。這就是時(shí)間線的作用。Context只是用于還原/刪除和[可選地]定義選擇器文本的作用域。
  Context對(duì)象本身被傳遞給函數(shù)，所以你可以很容易地引用它，像：gsap.context((self) => { ... self.add(...); });
  gsap.context()在3.11.0版本中添加

七、React Demo

gsap.context()可以解決React 18“在嚴(yán)格模式下雙重調(diào)用useEffect()”的問題，該問題通常會(huì)從()邏輯中中斷-只需在useEffect()清理函數(shù)中調(diào)用revert():
React Demo