Angular Animation离开过渡不适用于ngIf答案

【问题标题】：Angular Animation leave transition not working on ngIfAngular Animation离开过渡不适用于ngIf
【发布时间】：2019-02-25 08:38:28
【问题描述】：

在 Angular 7 中，我正在制作一个动画扩展面板。我使用状态输入将不透明度从 0 更改为 1，将高度 0 更改为 *。休假时，我希望不透明度从 1 变为 0，高度从 * 变为 0。

我可以成功地制作进入动画，但由于某种原因，我在休假时得到了一个有趣的结果。它几乎是先膨胀后收缩。我已经设置了一个 stackblitz 示例来更好地解释。

如何在展开时获得结果，并且单击我的按钮被单击不透明度从 1 变为 0，高度从 * 变为 0？

StackBlitz

我的动画代码如下。提前致谢！

animations: [
    trigger('myAccordian', [      
      state('*', style({ opacity: 1, height: '*'})),
      transition(':enter', [
        style({ opacity: 0, height: 0}),
        animate('1s ease-in')
      ]),
      transition(':leave', [
        style({ opacity: 0, height: 0}),
        animate('1s ease-out')
      ])
    ])
  ]

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

如果您描述了一个 '*' 状态 - 那么您还需要提供一些关于它在 void 状态下的外观的信息。另一种方法是直接描述输出样式，然后在动画内部处理完成样式。一个很好的例子可以在这里找到：Angular transition

trigger('myAccordian', [      
  transition(':enter', [
    style({ opacity: 0, height: 0}),
    animate('1s ease-in', style({ opacity: 1, height: '*' }))
  ]),
  transition(':leave', [
    style({ opacity: 1, height: '*'}),
    animate('1s ease-out', style({ opacity: 0, height: 0 }))
  ])
])

【讨论】：