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);
}

状态无效的nativescript角度动画

2 个答案: