淡入动画 Angular +2答案

【问题标题】：Fade in out animation Angular +2淡入动画 Angular +2
【发布时间】：2018-05-29 15:51:04
【问题描述】：

我正在尝试淡入新元素，并在我删除它时淡出它。

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'>
...
...

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

【问题讨论】：

只是<div *ngFor="let item of data" @enterAnimation>。让我知道它是否有效
从模板和动画中移除状态：stackblitz.com/edit/angular-dsdfuv-xopq1p

标签： angular angular-animations

【解决方案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>

请注意，您的项目只会褪色，不会塌陷或其他任何事情。因此，如果您使用了不稳定的行为，请不要感到震惊，那是因为您制作了一个非常简单的动画。

【讨论】：