Fatal编程技术网
  • angular/
  • Angular 离子3角动画显示隐藏

Angular 离子3角动画显示隐藏

angular animation

Angular 离子3角动画显示隐藏,angular,animation,ionic3,Angular,Animation,Ionic3,我使用离子3的网站角度。有两个小点将整个视图从视图1更改为视图2。基本上要做到这一点，我只是用下面的*ngIf做了一个离子行的显示隐藏 <ion-grid> <ion-row> <ion-col> <button ion-button (click)="switchView('view1')">View1</button> <button ion-button

我使用离子3的网站角度。有两个小点将整个视图从视图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
...
...
但总体过渡非常迅速。当我点击按钮从视图1转到视图2时，我想将其显示为滑动效果。请告知

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

您可以使用
组件可用的
动画
来实现这一点

然后在HTML中使用属性


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





我相信这会对您有所帮助

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