显示隐藏的离子 3 角度动画

Question

我正在为网站使用 ionic 3 angular。并且有 2 个小点将整个视图从视图 1 更改为视图 2。基本上要做到这一点，我只是使用 *ngIf 进行离子行的显示隐藏，如下所示

<ion-grid>
    <ion-row>
        <ion-col>
            <button ion-button (click)="switchView('view1')">View1</button>
            <button ion-button (click)="switchView('view2')">View2</button>
        </ion-col>
    </ion-row>
    <ion-row *ngIf="currentView == 'view1'">
    ...
    </ion-row>
    <ion-row *ngIf="currentView == 'view2'">
    ...
    </ion-row>
</ion-grid>

但整体过渡非常活泼。当我单击按钮从视图 1 转到视图 2 时，我想将其显示为滑动效果。请告知。

我认为 ionic 和 angular 都具有某种动画功能，但我不确定在这种情况下哪个是正确的以及如何使用它。

Answer 1

您可以使用可用于component 类的animations 来实现此功能，例如this answer

@Component({
  animations: [
    trigger(
      'myAnimation',
      [
        transition(':enter',
          [style({ transform: 'translateX(100%)', opacity: 0 }),
          animate('500ms', style({ transform: 'translateX(0)', 'opacity': 1 }))]),
        transition(':leave',
          [style({ transform: 'translateX(0)', 'opacity': 1 }),
          animate('500ms', style({ transform: 'translateX(100%)', 'opacity': 0 }))])
      ])]
})

然后在你的 HTML 中使用属性

<ion-row *ngIf="currentView == 'view1'" [@myAnimation]>