Angular Animation离开过渡不适用于ngIf

时间:2019-02-24 05:24:35

标签: angular angular-animations

在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')
      ])
    ])
  ]

1 个答案:

答案 0 :(得分:3)

如果您描述一个'*'状态-那么您还需要提供一些有关它在 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 }))
  ])
])