Animation when new element to DOM Angular

Question

learn from udemy course , i built a "to do list" , when the app loads all the "missions" are really animate but when i add or remove a new element to the dom the animation not work , why ?

here is the html page sample page that i build , form to add mission and output to right side of the page home.component.html:

  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="mainTitle">My Golads List!</h1>
    </div>
  </div>
  <div class="row">
    <div class="">
     <h2 class="sub-title">
       My next goal is:
     </h2>
     <form action="">
        <input type="text" name="goal" placeholder="Learn social skils" [(ngModel)]="goalText" /><br />
        <input type="submit" [value]="btnText" (click)="addItem()" />
     </form>
    </div>
    <div class="" [@goals]="goals.lenght">
      <h2 class="sub-title">Goal Lists: ({{itemCount}})</h2>
      <ul class="list" >
        <li *ngFor="let goal of goals; let i = index" (click)="removeItem(i)">{{goal}}</li>
      </ul>
    </div>
  </div>

here is the angular code , learn in from the course home.component.ts:

import { Component, OnInit } from '@angular/core';
import { trigger , style , transition , animate , keyframes , query , stagger } from "@angular/animations";
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [

  trigger('goals' , [
    transition('* => *' , [
      query(':enter' , style({opacity:0}) , {optional:true}),
      query(':enter' , stagger('300ms' , [
        animate('.6s ease-in' , keyframes([
          style({opacity:0 , transform:'translateY(-75%)' , offset:0}),
          style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
          style({opacity:1 , transform:'translateY(0)' , offset:1}),
        ]))
      ]) , {optional:true}),
      query(':leave' , stagger('300ms' , [
        animate('.6s ease-in' , keyframes([
          style({opacity:1 , transform:'translateY(0)' , offset:0}),
          style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
          style({opacity:0 , transform:'translateY(-75%)' , offset:1}),
        ]))
      ]) , {optional:true})
    ])
  ])

  ]
})

export class HomeComponent implements OnInit {

  itemCount: number;
  btnText: string = "Add an item";
  goalText: string = "my first life goal";
  goals = ["my first goal", "i wnat be the world" , "buy new car"];

  constructor() { }

  ngOnInit() {
    this.itemCount = this.goals.length;
  }


  addItem(){
    this.goals.push(this.goalText);
    this.goalText = "";
    this.itemCount = this.goals.length;
  }

  removeItem(i){
    this.goals.splice(i ,1);
  }
}

Answer 1

Use like this:

transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void

OR:

 transition('* => void', [
      style({height: '*'}),
      animate('.6s ease-out' , keyframes([
      style({opacity:0 , transform:'translateY(-75%)' , offset:0}),
      style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
      style({opacity:1 , transform:'translateY(0)' , offset:1}),
    ]))
 ]),
transition('void => *', [
      style({height: '*'}),
      animate('.6s ease-out' , keyframes([
      style({opacity:1 , transform:'translateY(0)' , offset:0}),
      style({opacity:.5 , transform:'translateY(35px)' , offset:.3}),
      style({opacity:0 , transform:'translateY(-75%)' , offset:1}),
    ]))
 ]),

StackBlitz EXAMPLE