角度5つのアニメーション：設定 'オーバーレイ：隠された' 'slideUp'

Question

私が持っているこのトリガー前：

export const slideInOutTrigger = trigger('slideInOut', [ 
    state('true', style({ 
     height: '0', 
     opacity: '0', 
     overflow: 'hidden' 
    })), 
    state('false', style({ 
     height: '*', 
     opacity: '1', 
     overflow: 'hidden' 
    })), 
    transition('true => false, 1 => 0', animate('300ms linear')), 
    transition('false => true, 0 => 1', animate('300ms linear')) 
]); 

それはreqular本部に使用されます。

<button (click)="collapsed = !collapsed">Trigger</button> 
<div [@slideInOut]="collapsed"> 
    // other content 
    <ng-select>..</ng-select> // <-CUSTOM SELECTBOX 
</div> 

すべてが細かい、滑らかなアニメーションの作品。 分割している間、Divのコンテンツは不可視である必要がありますので、"overlay：hidden"が使用されます（それ以外の場合は奇妙に見えます）。本部コンテンツと

紛争：

"オーバーレイ：隠された"が完全に示さ取得するカスタム選択ボックスを妨げます。

に対して選択ボックスのオプションは、事業部の下端に達したときに切断得ます。

私の質問：一時的と本部がアップスライドさ前に属性： 私は

• したい「は 『隠し』オーバーレイ」に設定します。
• slideDownが完了した後、属性は "overlay： 'visible'"に再度設定する必要があります。

何か助けてください！

Answer 1

Iは、次のステートマシンでそれを解決：

export const slideInOutTrigger = trigger('slideInOut', [ 
    state('true', style({ 
     height: '0', 
     opacity: '0', 
     overflow: 'hidden' 
    })), 
    state('false', style({ 
     height: '*', 
     opacity: '1', 
     overflow: 'visible' 
    })), 
    transition('true => false', animate('300ms linear')), 
    transition('false => true', [ 
     style({ overflow: 'hidden' }), 
     animate('300ms linear') 
    ]) 
]); 

主な違いは、状態およびアニメーションのアレイを期待transition()の2番目のパラメータです。 overflow CSSプロパティは、300ミリ秒後に非表示から非表示に遷移します。