각도 애니메이션으로 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 추가 -이 애니메이션 적어도있다.