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

Posted 2023-03-06

【中文标题】显示隐藏的离子 3 角度动画

【英文标题】：ionic 3 angular animation on show hide

【发布时间】：2018-03-01 22:17:35

【问题描述】：

我正在为网站使用 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 都具有某种动画功能，但我不确定在这种情况下哪个是正确的以及如何使用它。

【问题讨论】：

我相信这可以帮助你angular.io/guide/animations#example-entering-and-leaving

【参考方案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]>