Ionic ngIf动画

Question

我正在研究离子应用程序并添加了ngAnimations但是这并没有顺利运行，因为我将这个动画设置为div的状态，它出现在this.clicked = true;

以下是gif LINK的链接，可向您展示其动画效果。它首先显示在当前div之下，而当它消失时它会变得生动。

以下是我如何做的代码：

animations: [
    trigger('itemState', [
        state('void', style({
            transform: 'translateX(-100%)'
        })),
        transition('* => void', animate('500ms ease-out')),
        transition('void => *', animate('0.5s 500ms ease-out'))
    ])
]

html：

<ion-scroll scrollX="true">
  <div @itemState *ngIf="!clicked">
     <div class="availability-btn-wrapper" *ngFor="let availableDaysBtn of availableDays" (click)="getDay(availableDaysBtn)">
        <button ion-button round outline>{{ availableDaysBtn }}</button>
     </div>
  </div>
  <div @itemState *ngIf="clicked">
       <div class="availability-btn-wrapper" *ngFor="let availableTimeBtn of availableTimes" (click)="getTime(availableTimeBtn)">
          <button ion-button round outline>{{ availableTimeBtn }}</button>
       </div>
  </div>
</ion-scroll>

如何顺畅地显示第二个水平按钮行？