一、gsap.context()提供了兩個關鍵好處：
- 收集在提供的函數中創建的所有GSAP動畫和ScrollTriggers，以便您可以輕松地一次性將它們全部revert() or kill()。不需要跟蹤一堆變量、數組等。這在React模塊或任何你需要通過將元素恢復到原始狀態來“清理”的地方特別有用。
- [可選]將所有選擇器文本設置為特定的元素或Ref.這可以幫助簡化你的代碼，避免在React/Angular中創建大量的Ref。在提供的函數中，任何與gsap相關的選擇器文本將只應用于Element/Ref的后代。
假設你有一大塊GSAP代碼，它正在創建一堆不同的動畫，你需要能夠將它們全部還原()…
let ctx = gsap.context(() => {
gsap.to(...);
gsap.from(...);
gsap.timeline().to(...).to(...);
...
});
// 然后
ctx.revert(); // BOOM! 在該函數中創建的每個GSAP動畫都將恢復!
二、選擇器文本作用域：
你可以選擇傳入一個Element或React Ref或Angular ElementRef，然后所提供函數中的所有選擇器文本都將被限定在特定的Element/Ref上，這可以極大地簡化你的代碼。不再為你想要動畫的每個元素創建Ref !
let ctx = gsap.context(() => {
gsap.to(".box", {...}) // <- 正常的選擇器文本，自動作用域到myRefOrElement
gsap.from(".circle", {...});
}, myRefOrElement); // <- scope!!!
作用域可以是選擇器文本本身，如".myClass"。或者一個元素，React Ref或Angular的ElementRef。
三、添加到上下文：
也許你需要設置事件處理程序(比如鼠標點擊)來創建新的動畫，這些動畫也應該被收集到上下文中，但顯然這些事件將在上下文的函數已經執行之后發生。沒問題!你可以將自己的方法添加到Context對象中，這樣當它們運行時，它們會自動將任何生成的GSAP動畫/ScrollTriggers添加到Context中:
let ctx = gsap.context((self) => {
//使用任意字符串作為名稱;它會被添加到Context對象中，所以在這種情況下你可以調用ctx.onClick()
self.add("onClick", (e) => {
gsap.to(...); // <-- 被添加到上下文!
});
}, myRefOrElement);
// 現在Context有了一個onClick()方法，我們可以使用該方法，該函數中的任何動畫都會被添加到Context中
myButton.addEventListener("click", (e) => ctx.onClick(e));
或者你可以像這樣直接向Context中添加內容(作為第一個參數):
// 先創建好上下文
let ctx = gsap.context(() => {...});
// 之后再添加到上下文
ctx.add(() => {
gsap.to(...); // 現在所有這些都被添加到Context中。
gsap.from(...);
});
四、清理函數：
您可以選擇返回一個“清理函數”，如果/當上下文恢復時應該調用該函數。這可以包含你自己的自定義清理代碼:
let ctx = gsap.context(() => {
...
return () => {
//我的自定義清理代碼。在觸發ctx.revert()時調用。
};
});
你也可以在任何.add()函數中返回一個清理函數;當Context的revert()被調用時，它們都將被調用。
五、忽略特定的animations/ScrollTriggers
在非常不常見的情況下，你可能想要在函數內部創建某些GSAP動畫和/或ScrollTriggers，這些動畫應該從上下文中排除(當上下文被恢復/殺死時不被恢復/殺死)，在這種情況下，你可以像這樣使用ignore():
let ctx = gsap.context((self) => {
gsap.to(...); // <- 將得到恢復當ctx.revert()被調用的時候
self.ignore(() => {
gsap.to(...); // <- 當ctx.revert()被調用時將不會被恢復。忽略，沒有記錄在上下文中。
});
});
六、小秘訣：
- 當在Context上調用revert()時，它對于它包含的動畫/ScrollTriggers是永久的。它們將被還原并殺死，Context將自己清除，使它們符合垃圾收集的條件。但是在此之后仍然可以添加更多的動畫，并且可以在相同的Context上再次調用revert()來revert/kill這些動畫。
- Context并不是用來控制動畫的。這就是時間線的作用。Context只是用于還原/刪除和[可選地]定義選擇器文本的作用域。
Context對象本身被傳遞給函數，所以你可以很容易地引用它，像：gsap.context((self) => { ... self.add(...); });
gsap.context()在3.11.0版本中添加
七、React Demo
gsap.context()可以解決React 18“在嚴格模式下雙重調用useEffect()”的問題，該問題通常會從()邏輯中中斷-只需在useEffect()清理函數中調用revert():
React Demo
