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が適用されることが記述されています（スタイルは永続化されました）。

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

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

Answer 1

あなたは、次を使用して移行コードを書き換える必要があります。

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

、それが動作します。