Анимация Angular2 не анимируется

У меня есть следующий компонент в 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>
  `
})

И я прочитал статью об анимации Angular2. https://angular.io/docs/ts/latest/guide/animations.html

Там упоминается, что state.style применяется после завершения перехода (стиль становится постоянным).

Переход. стиль применяется перед запуском, а переход. анимация. стиль анимируется.

По какой-то причине в моем компоненте состояние переключается, но анимации нет... только state.styles применяются после времени анимации.