nativescript angular 带有状态的动画从不工作

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 sheet 中定义的样式）并且似乎永远不会调用触发器。我错过了什么吗？

Answer 1

我还没有测试，但应该可以：

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

在class中：

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

Answer 2

Nativescript 动画模块必须导入并包含在模块中。

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

这样就可以了。

nativescript angular 带有状态的动画从不工作

nativescript angular animation with states never works

nativescript

angular2-nativescript

angular