How to define transition correctly in angular 5 animation?

Question

I was able to run animation in the application but I'm trying with no success to animate slide out, I've tried the following:

animations: [
        trigger('slideOut', [
            transition ('* => void', [
            animate('1000ms ease-out',
              style({ transform: 'translateY(200%)' })
            )
        ])

Nothing is moving. I need actually the height to be zero but this example is just not moving as well. This should be animate an info message from display to disappearing. Thanks.

can you create stackblitz – Sajeetharan Jun 16 '19 at 07:28 — Sajeetharan, Jun 16 '19 at 07:28

score 0 · Answer 1 · answered Jun 18 '19 at 13:09

When you are using * => void you are actually telling Angular to animate your component when it goes out of view. Do you remove your component from the view? You may try to *ngIf your component and when it goes out of view animation will trigger.

Check this StackBlitz showing how to use this animation.

How to define transition correctly in angular 5 animation?

1 Answers1