Ionic 2 中的页面过渡动画答案

【问题标题】：Page Transition Animation in Ionic 2Ionic 2 中的页面过渡动画
【发布时间】：2017-10-29 07:37:12
【问题描述】：

我有一个简单的选项卡模板 Ionic 3 应用程序，在该应用程序中，每当用户基于左或右在视图上滑动时，我都会在选项卡之间切换我在选项卡之间切换，并且所有工作正常接受从点击标签或滑动屏幕。

我正在获取页面推送和弹出的动画

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

但不适用于选择标签

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

提前致谢

【问题讨论】：

标签： angular typescript animation ionic2 ionic3

【解决方案1】：

目前 Ionic 无法做到这一点，但您可以使用 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>

【讨论】：

它对我不起作用。我已按照您提到的步骤进行操作。显示选项卡但未加载页面并且滑动也不起作用。我正在使用 Ionic 2
@AkshayDeshmukh 请检查 GitHub 存储库的文档，或者如果您发现任何问题，请创建一个新的 GitHub 问题。它应该可以正常工作，因为有几个开发人员正在他们的项目中使用它（包括我）。
@sebaferreras，是的，我遵循所有步骤，但我不明白我错在哪里。这是我的 git 链接“github.com/akshayDeshmukh105/superTabDemo.git”。你能告诉我其中遗漏了什么吗？感谢您的帮助

【解决方案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 in 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 这是离子原生转换的良好实现，但这些仅适用于设备而不是浏览器

【讨论】：