AngularアニメーションでjQuery slideUp（）/ slideDown（）を複製する方法は？

Question

基本的には、* ngIfディレクティブを持つ要素にスムーズなアニメーション（jQueryのslideUp/slideDownメソッドに似ています）を追加します。これまでのところ、私はこれを試してみた：

trigger('slideUpDown', [ 
    transition('void => *', [ 
    style({height: 0, margin: 0, padding: 0}), 
    animate(1500, style({height: '*', margin: '*', padding: '*'})) 
    ]), 
    transition('* => void', [ 
    style({height: '*', margin: '*', padding: '*'}), 
    animate(1500, style({height: 0, margin: 0, padding: 0})) 
    ]) 
]) 

テンプレート：これは正しく動作していない

<div> 
    <label (click)="showEmailForm = !showEmailForm"><strong>Mail</strong></label> 
</div> 
<div [@slideUpDown] *ngIf="showEmailForm"> 
    <campaign-email-channel-form [channel]="channels?.mail" [isSaving]="isSavingEmailChannel" (save)="onSaveEmailChannel($event)"></campaign-email-channel-form> 
</div> 

。アニメーションが設定されているdivは正しくアニメーション化されているように見えますが、そのコンテンツ（フォームコンポーネント）はすぐに完全に表示されます。

また、コンポーネント自体にアニメーションと* ngIfを設定しようとしましたが、アニメーションコールバックを使用してトリガーされたことを確認できたとしても、アニメーションは何もしません。

Answer 1

あなたのアニメーションはすべて正しく設定されていますが、それは<campaign>要素を含むdivはオーバーフローを隠蔽しないということだけです。 *ngIfがtrueになると、要素がDOMに挿入されます。 <div>はアニメートされますが、あふれ要素を隠すことはないのですぐに表示されます。可能な解決策のカップルは、次のようになります。

• 使用<campaign-email-channel-form *ngIf="showEmailForm" [@slideUpDown]>
• を含むDIVのスタイルとしてoverflow: hiddenを追加 - それはアニメーション化され、少なくともながら。