GSAP集成Vue实现复杂动画的核心是精准控制、生命周期协同与元素引用可靠；通过按需导入、ref安全绑定DOM、timeline组织序列，并在mounted/onMounted初始化、watch响应更新、beforeDestroy/onBeforeUnmount销毁来确保动画稳定高效。
直接用 GSAP 集成 Vue 实现复杂动画，核心是“精准控制 + 生命周期协同 + 元素引用可靠”。不依赖 Vue 内置过渡系统，而是让 GSAP 主导时序、缓动和状态变化，Vue 负责数据响应与挂载时机。
安装与基础接入
在项目中安装 GSAP（推荐 v3+）：
- 运行 npm install gsap（Vue 2 或 Vue 3 均适用）
- 组件内按需导入：import { gsap } from 'gsap'；如需时间轴，可额外导入 import { gsap, TimelineMax } from 'gsap/all'（或直接用 gsap.timeline()）
- 无需全局挂载，避免污染，按组件引入更轻量、易维护
安全绑定 DOM 元素
避免使用 document.querySelector 等原生查询——它在 SSR 或异步渲染下易失效。优先采用 Vue 的响应式引用机制：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Vue 2：在 mounted 中通过 this.$refs.xxx 获取元素，确保 DOM 已就绪
- Vue 3（setup）：用 ref(null) 声明引用，配合 onMounted 访问 .value
- 多个同类元素（如列表项）：用 v-for + ref，Vue 会自动收集为数组（this.$refs.items 或 itemsRef.value），再遍历触发 stagger 动画
用时间轴组织复杂序列
单个 gsap.to() 只能处理简单 tween，真正应对入场/出场/联动/延迟嵌套等场景，必须靠 gsap.timeline()：
立即学习“前端免费学习笔记（深入）”；
- 声明一个 timeline 实例：const tl = gsap.timeline()
- 链式添加动画：tl.to(el1, {x: 100}).to(el2, {opacity: 0, delay: 0.2}).from(el3, {scale: 0})
- 支持标签定位（tl.add('start')）、重复播放（.repeat(1).yoyo(true)）、条件分支（if (show) tl.play('start')）
- 组件卸载前调用 tl.kill()，防止内存泄漏或动画残留
生命周期中管理动画状态
动画不是一次性执行完就结束，尤其涉及交互（如 hover、点击切换、路由进入/离开）时，必须与 Vue 生命周期对齐：
- 启动：在 mounted（Vue 2）或 onMounted（Vue 3）中初始化 timeline 或 tween
- 更新：监听 watch 数据变化，用 tl.tweenTo() 跳转到指定标签，或重新配置参数后 invalidate().restart()
- 销毁：Vue 2 用 beforeDestroy，Vue 3 用 onBeforeUnmount，主动 kill() 所有 GSAP 实例
