Почему не работают angular анимации, если я использую их на компоненте

Question

У меня есть список Bootstrap таблеток, отображаемых с использованием *ngFor. Я применил анимацию к таблеткам, чтобы они добавлялись при добавлении и исчезали при удалении. Все работает нормально.

Однако, если я извлекаю разметку таблетки в компонент Angular и применяю анимацию к компоненту, то работает только затухающая анимация, но не слайд.

Напротив, если я применяю анимацию к элементу root span внутри компонента таблетки, у меня возникает обратная проблема: слайд работает нормально, но затухание не т.

Почему это не работает одинаково во всех трех случаях? И как заставить обе анимации работать во всех трех случаях?

Я думаю, что третий случай не работает, потому что родительский элемент анимированного элемента удален из DOM, а не только сам анимированный элемент. Но я не понимаю, почему второй случай не работает.

Вот стек стека , показывающий все в действии.

Вот соответствующий код трех случаев.

Первый случай: все работает:

app.component. html

<span
  *ngFor="let pill of pills"
  @fadeInAndOut
  class="badge badge-pill badge-primary mr-1 mb-1"
  >{{ pill.value }}
</span>

app .component.ts

import { Component } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  animations: [
    trigger('fadeInAndOut', [
      transition(':enter', [style({ width: '0' }), animate('.5s ease-out', style({ width: '*' }))]),
      transition(':leave', [animate('.5s ease-out', style({ opacity: '0' }))])
    ])
  ]
})
export class AppComponent {
  pills = [];

  addPill() {
    this.pills.push({ value: 'hello' });
  }

  removePill() {
    if (this.pills.length) {
      this.pills.splice(this.pills.length - 1, 1);
    }
  }
}

Второй случай: только затухающие работы

app.component. html

<app-pill
  *ngFor="let pill of pills"
  @fadeInAndOut
>{{ pill.value }}</app-pill>

pill.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-pill', 
  templateUrl: './pill.component.html',
  styles: [':host { display: inline-block; }']
})
export class PillComponent {
}

pill.component. html

<span
  class="badge badge-pill badge-primary mr-1 mb-1"
  ><ng-content></ng-content>
</span>

Третий случай: только слайды

app.component. html

<app-animated-pill
    *ngFor="let pill of pills"
  >{{ pill.value }}</app-animated-pill>

animated-pill.component.ts

import { Component } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-animated-pill', 
  templateUrl: './animated-pill.component.html',
  styles: [':host { display: inline-block; }'],
  animations: [
    trigger('fadeInAndOut', [
      transition(':enter', [style({ width: '0' }), animate('.5s ease-out', style({ width: '*' }))]),
      transition(':leave', [animate('.5s ease-out', style({ opacity: '0' }))])
    ])
  ]
})
export class AnimatedPillComponent {
}

animated-pill.component. html

<span
  @fadeInAndOut
  class="badge badge-pill badge-primary mr-1 mb-1"
  ><ng-content></ng-content>
</span>