Angular Animation离开过渡不起作用NGIF

Question

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

我可以成功地为Enter做动画，但是由于某种原因，我在休假时获得了有趣的结果。它几乎先扩展，然后收缩。我已经设置了一个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')
      ])
    ])
  ]

Answer 1

如果您描述了一个'*'状态 - 那么您还需要提供一些有关其在 void state中的外观的信息。替代方法是直接描述输出样式，然后在动画内部处理饰面样式。可以在这里找到一个很好的例子：角过渡

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 }))
  ])
])