添加带有 angular 动画的列表项

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()不改变元素的放置行为，只是可见位置，不影响其他元素。

因此，要实际更改所有元素的 space，我们需要边距之类的东西。

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

有了这个，新项目被放置在列表上方，并在它移动时将所有后续元素向下推。

添加带有 angular 动画的列表项

adding list item with angular animations

angular-animations