幻灯片图像每次更改时如何显示文本动画

Question

我正在使用ngx slick，并且设置为自动播放，我希望每次显示新图像时为文本提供一些动画效果。

这是我的html 在h1上添加@enter或@leave不会执行任何操作。显示新图像时，我想用任何动画对h1进行动画处理。

<ngx-slick-carousel class="carousel"  class="lazy slider" 
      #slickModal="slick-carousel" 
                        [config]="slideConfig"
      >
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
          <h1>{{slide.txt}}</h1>
          <figure><img src="{{slide.img}}" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
      </ngx-slick-carousel>

这是打字稿

import { fadeInUpOnEnterAnimation, bounceOutDownOnLeaveAnimation, fadeInLeftOnEnterAnimation, fadeOutRightOnLeaveAnimation  } from 'angular-animations';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../app.component.css', './home.component.css'],
  animations: [
    fadeInLeftOnEnterAnimation({ anchor: 'enter', duration: 2000, delay: 200, translate: '30px' }),
    fadeOutRightOnLeaveAnimation({ anchor: 'leave', duration: 500, delay: 200, translate: '40px' })
  ]
})

export class HomeComponent implements OnInit {
slides = [
    {img: "theme/images/home01.jpg", txt: 'We sdfdsf excellence'},
    {img: "theme/images/home02.jpg", txt: 'We dsdsds sdsdsdsd'},
    {img: "theme/images/home03.jpg", txt: 'A sfdsfdsf ddsfsdds ssxxds'}
  ]
  slideConfig = {autoplay: true,"slidesToShow": 1, "slidesToScroll": 1, speed:800, "autoplaySpeed": 3000, cssEase: 'cubic-bezier(0.250,  0.060, 0.050, 0.040)'};
}