角度2動畫平滑垂直打開和關閉塊

Question

在我的角度2應用程序，我有組件與靜態頭和切換容器。我想爲打開和關閉內容塊添加流暢的動畫，但無法找到合適的轉換。 現在我試圖用這個動畫：

trigger('expandableState', [ 
     transition(':enter', [ 
     style({ transform: 'translateY(100%)', opacity: 0 }), 
     animate('500ms', style({ transform: 'translateY(0)', opacity: 1 })), 
     ]), 
     transition(':leave', [ 
     style({ transform: 'translateY(0)', opacity: 1, display: 'none' }), 
     animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 })), 
     ]), 
    ]) 

，但它的動作內容，而不是組件的邊框。這是plunker中的示例。 那麼，我應該使用什麼樣式來平滑切換內容？

Answer 1

animations: [ 
trigger('expandableState', [ 
    transition(':enter', [ 
    style({ height: '0', opacity: 0 }), 
    animate('500ms', style({ height: '*', opacity: 1 })), 
    ]), 
    transition(':leave', [ 
    style({ height: '*', opacity: 1 }), 
    animate('500ms', style({ height: '0', opacity: 0 })), 
    ]), 
]) 

我知道高度並不支持GPU，但我認爲這是唯一的選擇。