角2 - アニメーション表示/非表示がコンポーネントタグで動作しない

Question

コンポーネントの表示と非表示のアニメーションに取り組んでいます。

マイPlunkerは：ボタンをクリックすると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ファイルに追加することもできます。