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

导入具有Animations导入的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限制，正如标题有点暗示。

NativeScript Angular 5动画无法执行任何操作

1 个答案: