问题描述

使用gsap插件的<code>ScrollTrigger插件时 ，有以下2种情况之一要进行垃圾回收处理，若不做处理会导致页面超级卡顿。

在动画运行完毕，不再使用动画时元素被删除时

例子

给当前动画一个id，是因为后期不用此动画时，通过此id找到相应实例，清除处理。

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

//创建id

const id = new Date().getTime().toString()

//设置动画初始状态

gsap.set('.box', { opacity: 0, x: "-20%" })

// 给class为box的元素添加动画

ScrollTrigger.batch('.box', {

onEnter: batch => gsap.to(batch, {

opacity: 1,

x: 0,

}),

id

});

/**

* 删除、查找动画实例

* @param t type:String|Array 传入的数据 |

* - Array-删除实例

* - String-查询实例

*

* @returns undefined | Array

*/

const findDatchsOrdisDatchs = t => Array.isArray(t) ? batchs.forEach(it => it.kill()) : ScrollTrigger.getAll().filter(it => it.vars.id === id)

// 当我不再使用动画时，清除动画相关实例处理

// 1、根据id查询动画实例

const batchs = findDatchsOrdisDatchs(id)

// 2. 找到实例就删除处理

if(batchs.length)findDatchsOrdisDatchs(batchs )//清除完成