问题描述
- 使用gsap插件的
ScrollTrigger
插件时 ,有以下2种情况之一要进行垃圾回收处理,若不做处理会导致页面超级卡顿。- 在动画运行完毕,不再使用动画时
- 元素被删除时
例子
- 给当前动画一个id,是因为后期不用此动画时,通过此id找到相应实例,清除处理。
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
const id = new Date().getTime().toString()
gsap.set('.box', { opacity: 0, x: "-20%" })
ScrollTrigger.batch('.box', {
onEnter: batch => gsap.to(batch, {
opacity: 1,
x: 0,
}),
id
});
const findDatchsOrdisDatchs = t => Array.isArray(t) ? batchs.forEach(it => it.kill()) : ScrollTrigger.getAll().filter(it => it.vars.id === id)
const batchs = findDatchsOrdisDatchs(id)
if(batchs.length)findDatchsOrdisDatchs(batchs )