Angular 2 - Animation show/hide not work with component tag

Question

I'm working on animation for showing and hiding a component.

My Plunker: https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/

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

When click the botton, I want the "animation" div disappear, but it doesn't. The content inside "animation" component still showing.

Am I doing something wrong? Any help would be great. Thank you in advance.

Answer 1

The problem is that you are trying to animate a custom element. It has no display mode defined in CSS. If you add animation { display: block; } to your CSS it will work fine. You can do it inside its parent component like this

@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; }
    `]
})

Or you can add it to some global CSS file.