angular - 为什么我的 :enter 动画有效但我的 :leave 动画无效？

Question

这可以很好地将新行引入我的ngFor结构中，但:leave不会发生转换，或者它会立即发生。少了什么东西？

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

动画在组件模板中的应用方式如下：

<my-component *ngFor="let row of rows">
    <div [@fadeInShrinkOut]="''"> ... </div>
</my-component>

我正在组件内部的元素上制作动画，因为它根本不适用于组件，而动画在父级中。

还值得一提的ngFor是，它使用的是可观察的。我想知道这是否不是一个因素，重新创建可观察对象或其他会杀死原始数组的东西。

Answer 1

答案是，

演示：https ://plnkr.co/edit/iwnVFK0vfxAuPOgGmAaN?p=preview

animations: [
      trigger('fadeInShrinkOut', [
    transition(':enter', [
    style({
        opacity: '0',
        height:'0'                       // added for smoothness
    }),
    animate('.5s ease-out', style({
        opacity: '1',
        height: '*',                     // added for smoothness
    })),
]),
    transition(':leave', [
        style({
            height: '*',
            opacity: '1'                 // added
        }),
        animate('.5s ease-out', style({
            height: '0',
            opacity:'0'                  // added
        }))
    ])
    ])
  ],