CODEWITHSUNDEEP
javascriptangularangular-animations
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1692

Animating List in Angular 5

Created an animation in Angular 5 when adding and removing an item from the list.

When adding an item, it appears from top, ease in slowly and get placed in the list, and when an item is removed, the item is eased out slowly to the top and disappears. The issue i'm trying to solve is, when an item is removed, it eases out nice and slow and disappears, then the remaining items in the list, just snaps. I need the remaining items to move smoothly instead of snapping. How can i do that?

Here is my code:

app.component.ts

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, group } from '@angular/animations'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('itemAnim', [
      transition(':enter', [
    style({ transform: 'translateY(-20%)' }),
    animate(500)
  ]),
  transition(':leave', [
    group([
          animate('0.1s ease', style({ transform: 'translateY(-20%)' })),
          animate('0.5s 0.2s ease', style({ opacity: 0 }))
        ])
      ])
    ])
  ]
})
export class AppComponent {
  title = 'Item';
  items:string[]=[];
  i=0;
  addItem(){
    this.items.push(this.title+this.i++);
  }
  removeItem(){
    this.items.shift();
  }
}

app.component.html

<button (click)="addItem()">Add</button>
<button (click)="removeItem()">Remove</button>
<br/>
<ul>
  <li [@itemAnim]="items.length" *ngFor="let item of items">
    {{item}}
  </li>
</ul>

Here is the working plunker Click here

Upvotes: 3

Views: 3461

Answers (1)

br.julien
br.julien

Reputation: 3460

You could use the height of the <li> element, so when you change it to 0px to make it disappear, it moves a bit more smoothly the elements that are under :

transition(':leave', [
   group([
      animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
      animate('0.5s 0.2s ease', style({ opacity: 0 }))
   ])
])

I also increased the transition lasting time from 0.1s to 0.5s to make it more obvious.

Upvotes: 2

Related Questions