当我将 gsap 动画放在角度 ngOnInit 函数中时，它只播放一次答案

【问题标题】：gsap animation plays only once when I put it inside angular ngOnInit function当我将 gsap 动画放在角度 ngOnInit 函数中时，它只播放一次
【发布时间】：2019-06-20 11:39:09
【问题描述】：

我有一个 Angular 7 项目并导入了 Gsap 库。我希望每次导航到页面时都播放动画，因此我在 ngOnInit 中实现了 gsap 动画，但动画仅在我第一次访问页面时播放，并且在下次访问时没有动画。我创建了一个回调来在动画完成时记录一条消息，每次我导航到页面时，我都可以看到控制台中记录了完整的消息，但没有动画。这是我的 ts 代码：

import { Component, OnInit } from "@angular/core";
import { TweenMax } from "gsap";
@Component({
  selector: "app-list",
  templateUrl: "list.page.html",
  styleUrls: ["list.page.scss"]
})
export class ListPage implements OnInit {
  ngOnInit() {
    TweenMax.to("#myTarget", 1, {
      y: -50,
      onComplete: function() {
        console.log("animation completed");
      }
    });
  }
}

感谢您的帮助！

【问题讨论】：

没什么区别，我收到完整的日志消息，但动画只播放一次
TweenMax 呼叫每条路线或仅呼叫list page?。 ||尝试在 appComponent 上添加此代码并在每次路由更改时调用
动画是特定于 listPage 的。我的问题是调用了 gsap 动画并触发了完整的消息，但动画没有在视觉上播放。
你可以为你的问题创建stackblitz吗？

标签： angular gsap ngoninit

【解决方案1】：

实际上，我的代码运行正常！问题来源是在 homePage 和 listPage 中有两个相同的 id #myTarget，当在这两个页面之间导航时，gsap 与 2 个唯一 id 混淆。所以我把id改成了class，问题就解决了

【讨论】：