时间戳

首页 > 解决方案 > 当我将 gsap 动画放在角度 ngOnInit 函数中时，它只播放一次

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

问题描述

我有一个 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");
      }
    });
  }
}

感谢帮助！

标签： angulargsapngoninit

解决方案

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

推荐阅读