円滑な垂直開閉ブロックのための角度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ではサポートされていませんが、ここの唯一の選択肢だと思います。