角度动画多个触发器不起作用

Question

我正在使用角度动画，并且有2个触发器，但是只有第一个触发器有效，即使切换了一下，我也试图找出原因，但无法弄清楚。我最后的想法是，可能是因为其中一个触发器是另一个触发器的另一个子元素。

HTML：

<div class="description" [@changeDivSize]=currentState>
<!-- <div *ngIf="visible"> -->
    <p *ngFor="let service of services | slice:0:3; let i=index" [@slideyP]="currentSlide"> {{service.description}} </p> <!--[@slideyP]=currentSlide-->
<!-- </div> -->

TS：

animations: [
trigger('changeDivSize', [
  state('initial', style({
    backgroundColor: 'green',
    height: '0',
    overflow: 'hidden'
  })),
  state('final', style({
    backgroundColor: 'red',
    height: '100px'
  })),
  state('slide', style({
    backgroundColor: 'blue',
    height: '100px'
  })),
  transition('* <=> *', animate('500ms ease-in')),
]),
trigger('slideyP', [
  state('slideOne', style({
    transform: 'translateX(0%)'
  })),
  state('slideTwo', style({
    transform: 'translateX(-100%)'
  })),
  state('slideThree', style({
    transform: 'translateX(-200%)'
  })),
  transition('* <=> *', animate('500ms ease-in')),
])
]

谢谢