Javascript 将新元素添加到DOM时的动画

从我的课程中学习，我建立了一个“待办事项清单”， 当应用程序加载所有“任务”时，它们都是真正的动画，但当我向dom添加或删除新元素时，动画不起作用，为什么

这是我构建的html页面示例页面，用于将任务和输出添加到页面右侧 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>

这样使用：

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

或：

---

我还是不明白为什么我的代码不起作用，唯一不同的是html，当我使用教程中的html时，它的工作很好，有些东西不适合我的html，我不知道是什么？

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

 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}),
    ]))
 ]),