Ionic 2 中的页面过渡动画

Question

我有简单的选项卡模板 Ionic 3 应用程序，其中，每当用户基于向左或向右滑动视图时，我都会在选项卡之间切换我在选项卡和所有工作正常之间切换接受页面转换时没有动画效果发生在点击选项卡或滑动屏幕时。

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

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

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

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

If you need other animations you can Follow this Article which is good implementation of ionic-native transition but these only works on device not browser

Ionic 2 中的页面过渡动画

Page Transition Animation in Ionic 2

animation

typescript

ionic2

ionic3

angular