Угловая анимация nativescript с состояниями никогда не работает

Question

Я пытаюсь заставить работать анимацию в приложении ng nativescript. Вот как я настроил анимацию в компоненте

animations: [
    trigger('accessState', [
      state('loggingIn', style({ "color" : "red" })),
      state('signingUp', style({ "color" : "blue" })),
      transition('loggingIn <=> signingUp', [animate('600ms ease-out')])
    ])
  ]

Просто и понятно: два состояния и просто colorизменение свойства при переходе. В XML я использую анимацию следующим образом:

<Label text="hey there buddy" [@accessState]="isLoggingIn ? 'loggingIn' : 'signingUp' "></Label>

В моем компоненте у меня есть метод, который переключает значение isLoggingIn, Однако метка всегда остается зеленой (из-за стиля, определенного на листе CSS), и кажется, что триггер никогда не вызывается. Я что-то пропустил?

Answer 1

Модуль анимации Nativescript должен быть импортирован и включен в модуль.

import { NativeScriptAnimationsModule } from "nativescript-angular/animations"

Это сделает свое дело.

Answer 2

Я еще не тестировал, но должен работать:

   <label text="hey there buddy" [@accessState]="isLoggingIn"></label>
   <button (click)="changeState('loggingIn')">log up</button>
   <button (click)="changeState('signingUp')">sign up</button>

в классе:

...
isLoggingIn="reset";
....
changeState(state){
   this.isLoggingIn="reset";
   setTimeout(() => { this.isLoggingIn = state;},300);
}