Angular2:休假过渡不起作用

Question

我在使用Angular2 Animation单击Animation的按钮后试图隐藏Ionic2项目。

因此，在阅读了Angular2动画文档之后，我得出结论 :leave = *=>void和:enter = void => *。因此，对我来说，:enter运行良好，但:leave不是。

所以这是我的代码：

trigger('show', [
  state('void', style({
    opacity:0
  })),
  state('*', style({
    opacity:1
  })),
  transition(':enter', animate('700ms ease-in')),
  transition(':leave', animate('700ms ease-in'))
]),

我可以通过：

替换它

 transition('*<=>void', animate('700ms ease-in'))

，但我使用了当前的调试。

<ion-row align-items-center (click)="hide()">
      <ion-col *ngIf="isShown" [@show]>
        <img class="applictant" src="assets/icon/applicants-avatar.png">
        <h2>Applicant</h2>
      </ion-col>
</ion-row> 
  hide() {
    this.isShown === false ? this.isShown = true : this.isShown = false;
}

所以我对:leave的问题是什么不起作用，我该如何解决。

谢谢。

Answer 1

您可以尝试吗？

trigger('show', [
            transition(':enter', [style({opacity: '0'}), animate('700ms ease-in', style({opacity: '1'}))]),
            transition(':leave', [style({opacity: '1'}), animate('700ms ease-in', style({opacity: '0'}))])
        ]),