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在開始之前應用並且transition.animate.style被設置爲動畫。

出於某種原因，在我的組件狀態切換，但沒有動畫...只有在動畫時間後應用state.styles。

Answer 1

你只需要使用以下重寫你的過渡代碼：

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

，它會工作。