Ionic 2中的页面过渡动画

Question

我有一个简单的Ionic 3应用程序，其中包含标签模板。每当用户在视图上向左或向右滑动时，我会在标签之间切换，所有的工作都很好，唯一的问题是在从点击标签或从屏幕滑动时进行页面过渡时没有动画效果。

我可以获得页面推送和弹出的动画。

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

但不能用于选择选项卡

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

提前谢谢您

- SjVnyk

Answer 1

目前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>

- sebaferreras

---

对我来说没有起作用。我已经按照你提到的步骤进行了操作。选项卡显示出来了，但页面没有加载，滑动也不起作用。我正在使用Ionic 2。 - Akshay Deshmukh

@AkshayDeshmukh 请查看GitHub仓库的文档，如果发现任何问题，请创建一个新的GitHub问题。它应该能够正常工作，因为有几个开发人员正在他们的项目中使用它（包括我）。 - sebaferreras

@sebaferreras，是的我按照所有步骤进行了操作，但我不明白错在了哪里。这是我的Git链接'https://github.com/akshayDeshmukh105/superTabDemo.git'。你能告诉我它缺少了什么吗？感谢你的帮助。 - Akshay Deshmukh

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

注意- 如果你在Navbar中使用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'});
    }
}

如果您需要其他动画效果，可以参考此文章。该文章介绍了ionic-native转场的良好实现，但这些效果只适用于设备，而不适用于浏览器。

- Abhishek Singh