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

【问题标题】：gsap&Angular - onComplete triggering function but can't change variable valuegsap&Angular - onComplete 触发函数但不能更改变量值
【发布时间】：2018-10-11 12:42:01
【问题描述】：

我在我的 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;
}

【问题讨论】：

如果你控制 this.visible，你会在 toggleVisibility 方法中得到预期的结果吗？
啊，我收到undefined
这倾向于证实我的回答。
啊，是的，我在下面尝试了您的答案，效果非常好！感谢您的建议:-)
哦，太棒了 :) 很高兴我能帮上忙。

标签： javascript html css angular gsap

【解决方案1】：

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

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

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

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

【讨论】：