3

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

Ranjith Varatharajan
  • 1,596
  • 1
  • 33
  • 76

1 Answers1

2

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.

br.julien
  • 3,420
  • 2
  • 23
  • 44
  • Please take a look again on the plunkr, I have added bootstrap styles and it breaks your solution. – Ranjith Varatharajan Nov 16 '17 at 05:10
  • This is because the bootstrap class added some padding to the element (10px 15px 10px 15px). So a solution would be to change the padding also in your transition: **transform: 'translateY(-20%)', 'height':'0px', 'padding':'0px 15px 0px 15px' }** or **transform: 'translateY(-20%)', 'height':'0px', 'padding':'0px' }** – br.julien Nov 16 '17 at 07:59