頁面轉換動畫在離子2

Question

我有簡單的標籤模板Ionic 3應用程序，其中，我切換標籤之間每當用戶在視圖基於左或右滑動我切換標籤和所有工作正常接受沒有動畫當頁面轉換髮生在點擊標籤或滑動屏幕時的效果。

我收到了網頁動畫壓入和彈出

this.navCtrl.push(ContactPage, { 
    animation: true, direction: 'forward' 
}); 

但不適合提前

Answer 1

這是目前無法與離子選擇標籤

this.navCtrl.parent.select(2,{ 
    animation: true, direction: 'forward' 
}); 

謝謝，但你可以使用this amazing plugin來實現這樣的事情：

爲了安裝它，只需運行

npm i --save ionic2-super-tabs 

然後你的應用程序的主模塊中導入SuperTabsModule.forRoot()

import { SuperTabsModule } from 'ionic2-super-tabs'; 

@NgModule({ 
    ... 
    imports: [ 
     ... 
     SuperTabsModule.forRoot() 
     ], 
    ... 
}) 
export class AppModule {} 

現在一切都準備好了，那麼在你看來，你可以做一些事情像這樣：

<super-tabs> 
    <super-tab [root]="page1" title="First page" icon="home"></super-tab> 
    <super-tab [root]="page2" title="Second page" icon="pin"></super-tab> 
    <super-tab [root]="page3" title="Third page" icon="heart"></super-tab> 
</super-tabs> 

Answer 2

最後回答但對未來的用戶可能有用。您可以通過此代碼實現過渡動畫。一個這個問題標題&描述是不同的。所以我張貼的答案標題

goTo(page, params) { //params are optional leave blank {} if you are not sending data 
    this.navCtrl.push(page, { params: params }, { animate: true, animation: 'transition', duration: 500, direction: 'forward' }); 
} 

goBack(){ 
    this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'}); 
} 

注意 - 如果你是在BackButton做Navbar這

import {ViewChild } from '@angular/core'; 
import { Navbar } from 'ionic-angular'; 

//create global variable 
@ViewChild(Navbar) navBar: Navbar; 

//inside ionViewDidLoad override back button 
ionViewDidLoad() { 
console.log('ionViewDidLoad ProductPage'); 
this.navBar.backButtonClick = (e: UIEvent) => { 
     // todo something 
     console.log("Back Back"); 
     this.navCtrl.pop({animate:true,animation:'transition',duration:500,direction:'back'}); 
    } 
} 

如果需要其他動畫可以Follow this Article，這是很好的實施離子 - 本地過渡，但這些只適用於設備不瀏覽器