NativeScript Angular 5 Animations not doing anything

Question

I'm using NativeScript with Angular 5.

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

And I'm trying to get animations to work, but I can't get anything to happen at all. Not even any errors.

Here's how my app is laid out:

app.module:

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

That imports CoreModule which has the Animations import:

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

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

All of the rest of my modules are lazy loaded. For example my NotificationsModule looks like:

 @NgModule({
imports: [
    SharedModule,
    NotificationsRoutingModule

And SharedModule has:

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

Now in my notifications.component.html:

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

And in the ts file:

 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')])
    ]),

So this label should do a bunch of rotating as soon as the page loads. But nothing happens whatsoever. Is there something I'm missing?

To add more to this, I've tried other animations for entering and leaving and I can't get them to trigger either:

     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>

score 0 · Answer 1 · answered Jan 28 '18 at 21:53

0

You clearly borrowed that code from this repo which you can clone locally to witness it does work (or download from the appstores).

Said app is currently using Angular 4 so there may be some differences, but at least it's not a NativeScript limitation as the title kinda suggests.

answered Jan 28 '18 at 21:53

Eddy Verbruggen

3,550
1
15
27

Yes I borrowed from that repo as I'm trying to learn how it works. I've downloaded that app and it of course works; I've done most of my NativeScript learning through that repo. Though I only am using the animation part so our apps are very different and have different circumstances. In my case, this animation code doesn't work for me locally. It's a limitation of my app which isn't working because I'm doing something wrong. Thus, I'm asking if anyone can spot what I'm dong wrong. P.S. I think it's pretty cool you commented on my post. All your nativescript content has helped me so much. – user1513171 Jan 29 '18 at 01:06

NativeScript Angular 5 Animations not doing anything

1 Answers1