Question

我试图淡化新元素，并在删除它时将其淡出。

animations: [
        trigger('enterAnimation', [
            transition(':enter', [
                style({opacity: 0}),
                animate(800, style({opacity: 1}))
            ]),
            transition(':leave', [
                state('invisible', style({opacity: 0})),
                style({opacity: 0}),
                animate(800, style({opacity: 0}))
            ])
        ])
    ],

这是我的模板

<div *ngFor="let item of data" [@enterAnimation]='item.state'>
...
...

现在淡入效果很好，但是当我删除该项目时，我将项目从可见变为隐形，但元素并没有消失。

Answer 1

各国应该在转型之外。如果他们在里面，他们只会在过渡期间应用。
由于您使用循环，因此应使用自定义trackBy函数以确保正确添加/删除项目。
因为您依赖于进入和离开过渡，所以您不需要为动画属性提供参数。

这让你有了这个

trigger('Fading', [
  state('void', style({ opacity: 0 })),
  state('*', style({ opacity: 1 })),
  transition(':enter', animate('800ms ease-out')),
  transition(':leave', animate('800ms ease-in')),
]);

并在您的HTML中

<div *ngFor="let item of data" @Fading>

请注意，您的商品只会褪色，不会崩溃或任何其他内容。因此，如果您使用不稳定的行为，请不要感到震惊，因为您制作了一个非常简单的动画。

淡出动画Angular +2

1 个答案: