gsap&Angular - onComplete 触发函数但不能改变变量值

Question

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

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

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

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

我确实检查过函数是用 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() 中的上下文不同，因为您没有传递它。

这是一个棘手的概念，但您必须 pass/bind this 作为回调调用的函数 :

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

尝试在toggleVisibility()里面console.log(this)看上下文是否正确。

gsap&Angular - onComplete 触发函数但不能改变变量值

gsap&Angular - onComplete triggering function but can't change variable value

html

javascript

css

gsap

angular