显示隐藏的离子3角动画

我正在使用离子3角的网站。和有2个小点，从图1改变整个视图到图2基本上做到这一点我正在简单地做使用* ngIf象下面显示隐藏的离子3角动画

<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.请指教。

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

来源

2017-09-20 Vik

我相信这能帮助你https://angular.io /导向/动画＃示例进入和离去 –

你可以有这样的使用animations可供component类像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]>

来源

2018-01-09 11:55:49

显示隐藏的离子3角动画

回答

相关问题