gsap & Angular - функция запуска onComplete, но не может изменить значение переменной

Question

Я использую GSAP в своем проекте Angular для реализации анимации в моем пользовательском раскрывающемся меню.

Я обнаружил, что могу свернуть div до height: 0px, однако граница все еще присутствует.

Первоначально я предполагал использовать visibility: hidden с помощью директивы Angular: [hidden]="isHidden", где isHidden - объявленная переменная в файле .ts, инициализированная в конструкторе.

Я попытался использовать onComplete часть TweenMax.to(...) для запуска функции, которая переключит 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(), потому что вы не передаете его.

Это сложная концепция, но вы должны передать / связать this с функцией, которую вы вызываете в качестве обратного вызова:

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

Попробуйте console.log(this)внутри toggleVisibility(), чтобы увидеть, является ли контекст правильным или нет.