NativeScript Angular 5 Animations 没有做任何事情

Question

我正在使用带有 Angular 5 的 NativeScript。

"tns-core-modules": "~3.4.0",
"nativescript-angular": "~5.2.0",
"@angular/animations": "~5.2.0",

我正在尝试让动画正常工作，但我根本无法让任何事情发生。甚至没有任何错误。

这是我的应用的布局方式：

app.module:

@NgModule({
bootstrap: [
    AppComponent
],
imports: [
    CoreModule,
    AppRoutingModule
],
declarations: [
    AppComponent
]
})

导入具有动画导入的 CoreModule：

const MODULES: any[] = [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
NativeScriptAnimationsModule
];

@NgModule({
imports: [
    ...MODULES,

我所有其余的模块都是延迟加载的。例如，我的 NotificationsModule 如下所示：

 @NgModule({
imports: [
    SharedModule,
    NotificationsRoutingModule

SharedModule 有：

   imports: [
    NativeScriptCommonModule,
    NativeScriptModule,
    NativeScriptRouterModule,
    NativeScriptFormsModule,
    TNSFontIconModule,
],

现在在我的 notifications.component.html 中：

   <Label [@mystate]="'in'"

在ts文件中：

 animations: [
    trigger('mystate', [
        state('in', style({
            'opacity': 1,
            transform: 'scale(1) rotate(0)'
        })),
        state('void', style({
            'opacity': 0,
            transform: 'scale(0) rotate(-1300)'
        })),
        // 'after a delay of 1000ms, show an animation with a duration of 2300ms'
        transition('void => *', [animate('2300ms 1000ms ease-out')])
    ]),

所以这个标签应该在页面加载后立即进行一系列旋转。但是什么也没有发生。我有什么遗漏吗？

为了添加更多内容，我尝试了其他动画进入和离开，但我也无法触发它们：

     trigger('visibilityChanged', [
        transition(':enter', [
            style({ opacity: 0, transform: 'translateX(-40px)' }),
            animate(600, style({ opacity: 1, transform: 'translateX(0)' }))
        ]),
        transition(':leave', [
            style({ opacity: 1, transform: 'translateX(0)' }),
            animate(600, style({ opacity: 0, transform: 'translateX(-40px)'
            }))
        ])
    ])

HTML：

    <StackLayout [@visibilityChanged] *ngIf="shouldBeVisible" row="1" colSpan="3" class="dropdown-wrapper m-t-4">
            <Label text="test"></Label>
        </StackLayout>

Answer 1

您显然是从 this repo 借来的代码，您可以在本地克隆它以见证它确实有效（或从应用商店下载）。

所述应用目前使用的是 Angular 4，因此可能存在一些差异，但至少它不是标题所暗示的 NativeScript 限制。