javascript - gsap&Angular - onComplete 触发函数但无法更改变量值

Question

我在我的 Angular 元素中使用 GSAP 在我的自定义下拉菜单上实现动画。

我发现我可以将 div 折叠到 height: 0px，但边框仍然存在。

我最初的想法是通过使用 Angular 指令来使用 visibility: hidden:[hidden]="isHidden" 其中 isHidden是在构造函数中初始化的 .ts 文件中声明的变量。

我试图使用 TweenMax.to(...) 的 onComplete 部分来触发一个函数，该函数将切换 isHidden 为 true/false。但是，我发现我无法从这里更改 bool 值？

我确实检查了函数是否使用 console.log(...) 触发，但是我无法让变量发生变化...

我做错了什么吗？

visible: boolean;

constructor() {
  this.visible = false;
}

toggleDropdown(): void {
  TweenMax.to(dropdown, 1, {css: {height: '0px'}, ease: Power2.easeInOut, onComplete: this.toggleVisibility}
}

toggleVisibility() {
  this.visible = !this.visible;
}

Answer 1

我怀疑，在 toggleVisibility() 函数中，上下文 (this) 与 toggleDropdown() 中的上下文不同，因为你没有传递它。

这是一个棘手的概念，但您必须将 this 传递/绑定(bind)到您作为回调调用的函数:

...，onComplete:this.toggleVisibility.bind(this)

尝试在 toggleVisibility() 中使用 console.log(this) 来查看上下文是否正确。