Question

我正在使用离子3角度的网站。并且有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时，我想将它显示为滑动效果。请告知。

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

Answer 1

您可以使用animations类可用的component来@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 }))]) ])] })

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

然后在您的HTML中使用属性

xpath

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

1 个答案: