具有可变更改的角度动画不起作用

Question

我正在尝试使用淡入淡出动画制作标题和子标题的动画。但是它不起作用。

component.ts

    animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: '0' }),
        animate('.5s ease-out', style({ opacity: '1' }))
      ])
    ])
  ]
    currentIndex = 0;
    interval$ = interval(2000);
    sliderText = [
    {
      heading: 'abc',
      description:
        'hello this is text'
    },
    {
      heading: '123',
      description:
        'this is another text'
    }
    ];

    this.sub = this.interval$.subscribe(v => {
      if (this.currentIndex === this.sliderText.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
      console.log(this.currentIndex);
      this.cd.detectChanges();
    });

template.html

<h1 [innerHTML]="sliderText[currentIndex].heading"></h1>
<span [@fadeIn]="''">{{sliderText[currentIndex].description}}</span>

该动画无法进行索引更改。我在做什么错了？