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%)'}))
      ])
    ])
  ]

They are jumping down if the new element appears, because the new element takes the space, since your animation with transition has no impact to the actual space that the new item takes. You could give the new item a negative top margin, so the item is actually above the list, and pushes the following items down. So instead of transform: 'translateY(-100%)' use margin-top: '-100%'. — Jozott
– Jozott, Commented Apr 10, 2021 at 21:21

Jozott · Accepted Answer · 2021-04-10 21:44:58Z

2

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.

answered Apr 10, 2021 at 21:44

Jozott

2,7322 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

adding list item with angular animations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related