如何在 Angular 5 动画中正确定义过渡？答案

【问题标题】：How to define transition correctly in angular 5 animation?如何在 Angular 5 动画中正确定义过渡？
【发布时间】：2019-06-18 21:09:06
【问题描述】：

我能够在应用程序中运行动画，但我尝试没有成功动画滑出，我尝试了以下方法：

animations: [
        trigger('slideOut', [
            transition ('* => void', [
            animate('1000ms ease-out',
              style({ transform: 'translateY(200%)' })
            )
        ])

什么都没有动。我实际上需要高度为零，但这个例子只是不动。这应该是从显示到消失的动画信息消息。谢谢。

【问题讨论】：

你能创建stackblitz吗

标签： angular angular-animations

【解决方案1】：

当您使用* => void 时，您实际上是在告诉 Angular 在您的组件消失时对其进行动画处理。您是否从视图中删除了组件？您可以尝试 *ngIf 您的组件，当它超出视图动画将触发。

查看此StackBlitz，显示如何使用此动画。

【讨论】：