html - Angular 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

问题是您正在尝试为自定义元素设置动画。它没有display在 CSS 中定义的模式。如果您添加animation { display: block; }到您的 CSS 中，它将正常工作。您可以像这样在其父组件中执行此操作

@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 文件中。