Ionic中的页面过渡动画2

Question

我有简单的标签模板Ionic 3应用程序，其中，当用户在视图上向左或向右滑动时我在标签之间切换我在Tabs之间切换并且所有工作正常接受当页面转换发生时没有动画效果点击标签或轻扫屏幕。

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

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

但不是用于选择标签

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

提前致谢

Answer 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>

Answer 2

延迟回答，但可能对将来的用户有用。您可以通过此代码实现过渡动画。这个问题标题＆amp;描述不同。所以我发布了标题的答案

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这是离子 - 原生过渡的良好实现，但这些仅适用于设备而非浏览器