显示隐藏时的离子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

您可以使用可用于< code>component类的< code>animations来实现这一点，如下所示

@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]>