angular - Angular2 アニメーションがアニメーション化しない

Question

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 が適用されることが言及されています (スタイルは永続化されます)。

transition.style は start の前に適用され、 transition.animate.style がアニメーション化されます。

コンポーネントで何らかの理由で状態が切り替わりますが、アニメーションはありません...アニメーション時間の後に state.styles のみが適用されます。