【GSAP】ScrollTrigger插件的注意事项 | 用的好，非常流畅。用的不好，卡到爆炸的前端动画库

本文主要是介绍【GSAP】ScrollTrigger插件的注意事项 | 用的好，非常流畅。用的不好，卡到爆炸的前端动画库，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

• 使用gsap插件的ScrollTrigger插件时 ，有以下2种情况之一要进行垃圾回收处理，若不做处理会导致页面超级卡顿。
  1. 在动画运行完毕，不再使用动画时
  2. 元素被删除时

例子

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

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);//创建idconst 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 )//清除完成

这篇关于【GSAP】ScrollTrigger插件的注意事项 | 用的好，非常流畅。用的不好，卡到爆炸的前端动画库的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---