Angular 离子2中的页面转换动画

我有一个简单的tabs template Ionic 3应用程序，在这个应用程序中，每当用户在视图上向左或向右滑动时，我都会在选项卡之间切换。我会在选项卡之间切换，所有工作正常。点击选项卡或滑动屏幕时，页面转换不会产生动画效果

我得到的网页推和弹出动画

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

但不用于选择选项卡

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

---

提前感谢

这在Ionic中目前是不可能的，但您可以使用来实现以下目标：

要安装它，只需运行

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>

---

延迟回答，但可能对未来用户有用。您可以通过此代码实现过渡动画。此问题的标题和描述不同。所以我要发布标题的答案

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
，请执行此操作

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'});
    }
}

如果您需要其他动画，您可以，这是离子本机转换的良好实现，但这些仅适用于设备，而不适用于浏览器

这对我不起作用。我已经按照你提到的步骤做了。显示选项卡，但页面未加载，滑动也不起作用。我用的是离子型的2@AkshayDeshmukh请检查GitHub回购协议的文档，如果发现任何问题，请创建新的GitHub问题。它应该可以正常工作，因为有几个开发人员（包括我）正在他们的项目中使用它。@sebafereras，是的，我遵循所有步骤，但我不明白我错在哪里。这是我的git链接“”。你能告诉我它漏掉了什么吗。谢谢你的帮助