Angular 角度动画多个触发器不工作

我使用角度动画，有两个触发器，但只有第一个触发器工作，即使切换，我试图找出原因，但无法找出它。我最后的想法是，可能是因为其中一个触发器是另一个触发器的子元素

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> -->

{{service.description}

TS:

动画：[
触发器（'changeDivSize'[
状态（'首字母'，样式）({
背景颜色：“绿色”，
高度：“0”，
溢出：“隐藏”
})),
状态（‘最终’，样式）({
背景颜色：“红色”，
高度：“100px”
})),
状态（“幻灯片”，样式({
背景颜色：“蓝色”，
高度：“100px”
})),
过渡（'**'，动画（'500ms缓进'），
]),
触发器（'slideyP'[
状态（'slideOne'，样式({
转换：“translateX（0%）”
})),
状态（'slidewo'，样式({
转换：“translateX（-100%）”
})),
状态（'slideThree'，样式({
转换：“translateX（-200%）”
})),
过渡（'**'，动画（'500ms缓进'），
])
]

---

谢谢

你能通过点击F12打开chrome开发工具并查看动画是否附加到元素上吗？我们还需要js部分，你可以在其中放入currentSlide变量。我想你需要使用animatechild，请参见Hi，谢谢你的回复@Eliseo我已经尝试过使用animateChild，但仍然没有按预期工作。父触发器将高度从0更改为100px。子触发器应根据单击的位置（使用translate X）滑动信息。它们都是单独工作的（因此，如果高度已经达到100px，则滑动功能可以工作），但如果高度为0，则div应该同时展开和滑动。但刷卡不起作用，它打开高度，然后跳到正确的位置，而不是刷卡

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