如何在angular 4中的不同div中使用一个动画？可能吗？

这是我的动画代码

[
trigger('slideInOut', [
  transition(':enter', [
    style({transform: 'translateX(100%)'}),
    animate('300ms ease-in', style({transform: 'translateX(0%)'}))
  ]),
  transition(':leave', [
    animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
  ])
])

]

我需要使用两个div，当一个div为false时，第二个div要跟随动画吗？ 有什么帮助吗？ 我的html代码是

<div>
  <div *ngIf="show_chart" [@slideInOut]>
    <label>New One</label>
 </div>
 <div *ngIf="show_chart" [@slideInOut]>
    <label>Second one</label>
</div>

新的
第二个

---

只有第一个div正在显示

不要使用*ngIf，下面是正确的动画语法

animations:  [
  trigger('slideInOut', [
    state('1', style({ opacity: 0 })),
    state('0', style({ opacity: 1 })),
    transition('1 => 0', [
      style({ transform: 'translateX(100%)' }),
      animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
    ]),
    transition('0 => 1', [
      animate('300ms ease-in', style({ transform: 'translateX(-100%)' }))
    ])
  ])
]

并在html中按以下方式编写

<div>
  <div [@slideInOut]="!show_chart">
    <label>New One</label>
 </div>
 <div [@slideInOut]="show_chart">
    <label>Second one</label>
</div>

<button (click)="show_chart = !show_chart">Toggle Me</button>

新的
第二个
切换我

因为您没有在动画中使用状态

---

使用state可以检查当前状态。

你能为此创建stackblitz吗？我认为这不是角度动画的问题，因此，一旦检查此步骤而没有*ngIfi有一个值数组，让abc=[“一”、“二”、“三”]取决于此值，我创建div。此数组不一致，可能会更改。我想要的是，当abc[0]==one时，div1想要显示，如果是另外两个div想要显示…它想要一个接一个地滑动