Question

我尝试使用angular2动画点击带动画的按钮后隐藏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'}))])
        ]),

Angular2：离开过渡不起作用

1 个答案: