将 Vue v-for 与 GSAP 转换相结合

编程问答 2022-05-30

问题描述

我有两个组件，一个生成一堆 div

<div
      v-for="(app,index) in items.apps"
      ref="appIcon"
      :key="index"
    >
        <div @click="openApp(app)"></div>
</div>

使用将点击的 div 推入 openedApps 数组的方法

openApp(appName) {
      this.items.openedApps.push(appName)
}

然后，在一个单独的组件中，apps 的数组是根据其内容动态生成的

<div
      v-for="(app,index) in items.openedApps"
      ref="appWindow"
      :key="index"
    >
</div>

并且我想对 openedApps 数组中的所有项目进行转换，但分开进行，最好使用 GSAP。

但是当我这样做时

mounted() {
    let { appWindow } = this.$refs
    let timeline = new TimelineLite()

    timeline.from(appWindow,1,{opacity:0})
  }

什么也没发生，我从 GSAP 收到一条错误消息，提示“未找到 GSAP 目标未定义”。

所以我猜这里使用mounted() 钩子有问题，但我不知道该怎么做。两天来一直在这个问题上撞墙试图弄清楚，因为我真的想在这个项目中使用 GSAP 而不仅仅是标准，但我只是不知道如何使用 GSAP 和 Vue 成功地定位某些 div。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsapjavascripttransitiontransitionv-forvue.js