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

答案是，

DEMO：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
        }))
    ])
    ])
  ],

为什么我的：进入动画工作但我的：留下动画不是？

1 个答案: