GSAP React 生命周期
专业提示词库 / 数字产品与交互设计（UI/UX） / 实现技巧
在 React 中用 useGSAP 或 gsap.context 管理选择器作用域、动画创建和 ctx.revert 清理。
适用场景： 用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层
适用边界
- 工具专属：GSAP；不能推广为所有工具的通用行为。
- 含待核验的外部信息；使用前核验当前官方文档，不视为已验证事实。
在 React 中用 useGSAP 或 gsap.context 管理选择器作用域、动画创建和 ctx.revert 清理。
什么时候用
用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层
01 · 带入你的需求
填写场景参数
填写内容仅在当前页面使用，不写入浏览器存储。留空时保留明确的「待填写」标记。
02 · 看懂之后，再复制
完整提示词
实时预览 · 原样复制还有 1 项参数待填写；可以先复制，再补充。
# GSAP React 生命周期 我的任务：[待填写：任务目标与实际约束] 下面是基于原始资料整理的执行提示词，不是原作者逐字提供的完整成品。请保留用户已给出的条件；未填写项先澄清，不虚构数值、业务逻辑或核验结果。示例参数不是全局默认或效果保证。候选方向按任务选择，不要求全部叠加。 【适用边界】 - 工具专属：GSAP；不能推广为所有工具的通用行为。 - 含待核验的外部信息；使用前核验当前官方文档，不视为已验证事实。 【名称】 GSAP React 生命周期 【白话解释】 在 React 中用 useGSAP 或 gsap.context 管理选择器作用域、动画创建和 ctx.revert 清理。 【适用场景】 用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层 【专业参数与锚点】 - useGSAP - gsap.context - scope - ctx.revert - dependencies 【边界与约束】 - 动画创建绑定组件生命周期 - 依赖变化先清理旧动画 【适用工具】 GSAP 【工具专属】 是 【需要核验】 是 【核验说明】 - 避免在 render 阶段创建动画 【验收标准】 - 动画创建和销毁可追踪 - 快速交互不产生重复回调 - 未指定 GSAP 时不强制引入 【scope】 provider-specific 【适用工具】 GSAP 【不得泛化】 是 【已核验日期】 未提供 / 待核验 【需要核验】 是 【输出要求】 先说明采用的方向与待确认项，再给出满足约束的方案或内容，并附可验证的检查清单。 【来源】 https://github.com/konglong87/feeling-to-jargon/blob/4c245f7a43d143dcfbd194b768ee1c4d8aa8ff8d/terms/animation-tool-adapter/gsap-react-lifecycle.json
待核验或待确认资料不能加入执行组合，请先单独阅读其边界。
来源与版本
- 源文件
- terms/animation-tool-adapter/gsap-react-lifecycle.json （在新标签页打开）
- 固定提交
4c245f7a43d143dcfbd194b768ee1c4d8aa8ff8d- 许可证
- MIT
本条内容展开以下来源文件，阅读与复制不需要访问本机路径：
terms/animation-tool-adapter/gsap-react-lifecycle.jsonindex/runtime.json
如何把白话说具体
本条目将「用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层」拆解为专业维度、参数和约束。先替换自己的任务与输入，再检查边界和验收标准；示例值不是承诺，也不是所有项目的默认值。
检索词（含站点导引词）： GSAP、gsap react 生命周期、GSAP React 生命周期、continuous-interaction、performance-budget、interruption、React 动画清理、组件卸载清理、ctx.revert、useGSAP、gsap react lifecycle、gsap-react-lifecycle
阅读完整文字版（保留待填写项，可直接复制）
text
# GSAP React 生命周期
我的任务：[待填写：任务目标与实际约束]
下面是基于原始资料整理的执行提示词，不是原作者逐字提供的完整成品。请保留用户已给出的条件；未填写项先澄清，不虚构数值、业务逻辑或核验结果。示例参数不是全局默认或效果保证。候选方向按任务选择，不要求全部叠加。
【适用边界】
- 工具专属：GSAP；不能推广为所有工具的通用行为。
- 含待核验的外部信息；使用前核验当前官方文档，不视为已验证事实。
【名称】
GSAP React 生命周期
【白话解释】
在 React 中用 useGSAP 或 gsap.context 管理选择器作用域、动画创建和 ctx.revert 清理。
【适用场景】
用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层
【专业参数与锚点】
- useGSAP
- gsap.context
- scope
- ctx.revert
- dependencies
【边界与约束】
- 动画创建绑定组件生命周期
- 依赖变化先清理旧动画
【适用工具】
GSAP
【工具专属】
是
【需要核验】
是
【核验说明】
- 避免在 render 阶段创建动画
【验收标准】
- 动画创建和销毁可追踪
- 快速交互不产生重复回调
- 未指定 GSAP 时不强制引入
【scope】
provider-specific
【适用工具】
GSAP
【不得泛化】
是
【已核验日期】
未提供 / 待核验
【需要核验】
是
【输出要求】
先说明采用的方向与待确认项，再给出满足约束的方案或内容，并附可验证的检查清单。
【来源】
https://github.com/konglong87/feeling-to-jargon/blob/4c245f7a43d143dcfbd194b768ee1c4d8aa8ff8d/terms/animation-tool-adapter/gsap-react-lifecycle.json原始资料与依赖
以下为锁定提交中的原始结构化内容；上方整理版与原文分开，不把本站整理误标为原作者成品。
展开当前条目原文
json
{
"schema_version": "1.0.0",
"leaf_id": "gsap-react-lifecycle",
"domain_id": "digital-product-uiux",
"subdomain_id": "animation-tool-adapter",
"title": "GSAP React 生命周期",
"knowledge_type": "technique",
"scope": "provider-specific",
"status": "published",
"intent_ids": [
"implement-gsap",
"audit-gsap"
],
"do_not_generalize": true,
"provider": "GSAP",
"verified_at": null,
"verification_required": true,
"entries": [
{
"id": "gsap-react-lifecycle",
"name": "GSAP React 生命周期",
"plain_language": "在 React 中用 useGSAP 或 gsap.context 管理选择器作用域、动画创建和 ctx.revert 清理。",
"when_to_use": "用户明确指定 GSAP，或项目已经采用 GSAP 作为动效实现层",
"parameters": [
"useGSAP",
"gsap.context",
"scope",
"ctx.revert",
"dependencies"
],
"related": [
"continuous-interaction",
"performance-budget",
"interruption"
],
"constraints": [
"动画创建绑定组件生命周期",
"依赖变化先清理旧动画"
],
"aliases": [
"GSAP",
"gsap react 生命周期"
],
"provider": "GSAP",
"provider_specific": true,
"verification_required": true,
"verification_note": [
"避免在 render 阶段创建动画"
],
"acceptance": [
"动画创建和销毁可追踪",
"快速交互不产生重复回调",
"未指定 GSAP 时不强制引入"
]
}
]
}查看覆盖清单与许可证 · 来源提交：4c245f7