Angular 2 - 애니메이션 표시/숨기기가 구성 요소 태그와 함께 작동하지 않습니다.

Question

저는 구성 요소 표시 및 숨기기를 위해 애니메이션 작업을하고 있습니다.

내 Plunker는 다음 botton을을 클릭하면 https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/

<animation [@toggleHeight]="isShow"></animation> 
<button (click)="isShow = (isShow==='show')? 'hide' : 'show'">Toggle</button> 
<calc></calc> 

, 나는 "애니메이션"사라 DIV 원하지만 그렇지 않습니다. "애니메이션"구성 요소 안의 내용이 계속 표시됩니다.

내가 잘못 했나요? 어떤 도움이라도 좋을 것입니다. 미리 감사드립니다.

Answer 1

문제는 사용자 지정 요소에 애니메이션을 적용하려고하는 것입니다. CSS에는 display 모드가 정의되어 있지 않습니다. CSS에 animation { display: block; }을 추가하면 정상적으로 작동합니다.

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    animations: [ 
    trigger('toggleHeight', [ 
      state('hide', style({ 
       height: '0px', 
       opacity: '0', 
       overflow: 'hidden', 
       // display: 'none' 
      })), 
      state('show', style({ 
       height: '*', 
       opacity: '1', 
       // display: 'block' 
      })), 
      transition('hide => show', animate('200ms ease-in')), 
      transition('show => hide', animate('200ms ease-out')) 
     ]) 
    ], 
    styles: [` 
     animation { display: block; } 
    `] 
}) 

또는 일부 글로벌 CSS 파일에 추가 할 수 있습니다.