添加带有角度动画的列表项

Question

我正在尝试用ngFor制作一个列表的动画。当一个新项目被动态地添加到数组中时，我希望动画如下。不知怎么的，我无法获得这种滚动效果。你知道我做错了什么吗？

@Component({
selector: 'widget',
templateUrl: './widget.component.html',
styleUrls: ['./widget.component.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('800ms ease-in-out', style({transform: 'translateY(0%)'}))
])
])
]
})

html

<div *ngFor="let winner of widgetService.winners; let i = index"
class="winners__item" [@slideInOut]>
<img [src]="winner.imageUrl" alt="{{ winner.gameName }}">
<div class="block__container--first">
<div class="block__container--first--gameName">{{winner.gameName}}</div>
<div class="block__container--first--firstName">{{winner.firstName}}</div>
</div>
<div class="block__container--second">
<div class="block__container--second--timestamp">{{winner.timestamp}}m ago</div>
<div class="block__container--second--winning">{{winner.amount}} €</div>
</div>
</div>

[！[在此输入图像描述][1]][1]

我有什么：

[！[在此输入图像描述][2]][2]

我试过的：

animations: [
trigger('slideInOut', [
transition(':enter', [
style({marginTop: '-100px'}),
animate('800ms ease-in-out', style({transform: 'translateY(0%)'}))
])
])
]

Answer 1

元素跳下是因为新元素占据了第一位。transform: translate()不会更改图元的放置行为，只会更改可见位置，而不会影响其他图元。

因此，要真正改变所有元素的空间，我们需要一些像裕度这样的东西。

animations: [
trigger('slideInOut', [
transition(':enter', [
style({marginTop: '-100%'}),
animate('800ms ease-in-out', style({marginTop: '0px'}))
])
])
]

这样，新项目就会被放置在列表上方，并在移动时向下推所有以下元素。