状态之间的角度过渡动画仅对一个状态正确动画

Question

我正在尝试将可扩展行添加到角度材质表中，因此我找到了一个示例。我通过将角度版本升级到^ 7.0.0修改了示例，并且当从“折叠”转换为“展开”时，突然动画停止了工作。 Here is a stackblitz demonstrating the problem。如果单击某行以展开它，在短暂延迟后该行会立即展开。然后，如果再次单击该行以折叠它，则动画可以正常工作。如何修复动画以便正确扩展行动画？

Answer 1

只需将动画保持在高度

  state('expanded', style({height: '*'})),
  state('collapsed', style({height: '0px'})),

display: 'none'}看起来很烦人。

https://stackblitz.com/edit/angular-lb7n8q-ldwsld?file=app/table-expandable-rows-example.ts