Angular2 animation not animating

Question

I have the following Component in Angular2.

@Component({
  selector: 'nav-menu-item',
  styleUrls: ['./menu-item.component.scss'],
  animations: [
    trigger('collapsedState', [
      state('collapsed', style({
        height: 0
      })),
      state('expanded', style({
        height: '100%'
      })),
      transition('* => expanded',  [style({height: 0}),      animate(600, style({height: '100%'}))]),
      transition('* => collapsed', [style({height: '100%'}), animate(600, style({height: 0}))])
    ])
  ],
  template: `
    <li *ngIf="!config.children">
      <button (click)="onClick()">
        <i class="fa {{config.iconCls}}"></i> {{config.text | translate}}
      </button>
    </li>
    <li *ngIf="config.children" class="submenu">

      <button  (click)="toggleCollapsed()">
        <i class="fa {{config.iconCls}}"></i> {{config.text | translate}}
      </button>

      <ul [@collapsedState]="collapsed">
        <nav-menu-item *ngFor="let child of config.children" [config]="child"></nav-menu-item>
      </ul>

    </li>
  `
})

And I have read the article about Angular2 animations. https://angular.io/docs/ts/latest/guide/animations.html

There it is mentioned that the state.style is applied after a transition completes (style made persistent).

The transition.style is applied before start and transition.animate.style is animated to.

For some reason in my Component the state toggles but there is no animation ... only the state.styles are applied after the animation time.

Answer 1

You just need to rewrite your transition code with the following:

transition('* => expanded', animate( '600ms linear')),
transition('* => collapsed', animate( '600ms linear')),

and it will work.