adding list item with angular animations

Question

I m trying to animate a list which is made with ngFor. When dynamically a new item is added to the array, i want to have the animation bellow. Somehow i cant get this rolling effect. Any ideas what am i doing wrong ?

@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>

[![enter image description here][1]][1]

what i have:

[![enter image description here][2]][2]

what i tried:

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

Answer 1

The elements jump down because the new element takes the first place. transform: translate() does not change the place behavior of the element, but only the visible position, without affecting other elements.

So to actual change the space of all elements, we need something like margin.

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

With this, the new item is placed above the list and pushes all following elements down when it moves.