Why animation doesn't work in an Angular 5 app?

Asked Jun 13 '19 at 06:34

Active Jun 15 '19 at 07:46

Viewed 164 times

I'm trying to develop the first animation in an Angular 5 app and it doesn't work. What I've done till now in detail:

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   imports: [
      BrowserModule,
      ...
      BrowserAnimationsModule,
      ...

In my component:

import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';

animations: [

      trigger('slideOut', [
          transition('* => void', [
            style({height: '*'}),
            animate('2000ms ease-out', style({height: 0})),
          ])
        ])

    ]

Here is the template:

 <div [@slideOut] class="alert alert-success alert-dismissible fade in" role="alert">
    <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    All is good!
</div>

Any idea what I'm missing here ? Do I need to install something?

edited Jun 13 '19 at 06:44

Prashant Pimpale

10,349
9
44
84

asked Jun 13 '19 at 06:34

user2304483

1,462
6
28
50

is there `NoopAnimationModule` in the app.module.ts? – Prashant Pimpale Jun 13 '19 at 06:42
There is no NoopAnimationModule – user2304483 Jun 13 '19 at 06:46
I think you can find more details [here](https://youtu.be/oa9cnWTpqP8) – Prashant Pimpale Jun 13 '19 at 07:02
I think I've seen this video before, actually I've seen more than this including video on animation specifically. – user2304483 Jun 13 '19 at 07:04
Check the console for error or might be you have missed any single step? – Prashant Pimpale Jun 13 '19 at 07:09
The console is open , no errors – user2304483 Jun 13 '19 at 07:30

Why animation doesn't work in an Angular 5 app?

0 Answers0