Animating entering and leaving a view in Angular

app.component.html

<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <input type="text" #input>
      &nbsp;
      <button class="btn btn-primary" (click)="onAdd(input.value)">Add Item!</button>
      <hr>

      <!--
            prevent animation at page load
      -->
      <div [@preventAnimation]>
        <ul class="list-group">
          <!--[@list1] should not be bound to anything because the state is void-->
          <li
            class="list-group-item"
            (click)="onDelete(item)"
            [@list1]
            *ngFor="let item of list">
            {{ item }}
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

app.component.ts

import {Component} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition, useAnimation,
  // ...
} from '@angular/animations';
import {bounceIn} from 'ng-animate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('preventAnimation', [
      // use an empty animation as parent of the list1 to prevent animation for it
      transition('void => *', [])
    ]),
    trigger('list1', [state('in', style({
      // this is the final style that the animation goes to it
      opacity: 1,
      transform: 'translateX(0px)'
    })),
      // void is for items not present in the DOM
      transition('void => *', [
        style({
          // this style will be applied before animation starts
          // so this would be the initial style of element
          opacity: 0,
          transform: 'translateX(-100px)'
        }),
        animate(300)]),
      // animation for removing item from DOM
      transition('* => void', [
        animate(300, style({
          opacity: 0,
          transform: 'translateX(100px)'
        }))
      ])
    ])
  ],
})
export class AppComponent {
  title = 'animations';
  list = ['Milk', 'Sugar', 'Bread'];

  onAdd(item) {
    this.list.push(item);
  }

  onDelete(item: string) {
    this.list.splice(this.list.indexOf(item), 1);
  }
}

References
https://angular.io/guide/transition-and-triggers#animating-entering-and-leaving-a-view

Related