Ionic 2 中的页面过渡动画 [英] Page Transition Animation in Ionic 2

问题描述

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

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

this.navCtrl.push(ContactPage, {动画:真，方向:前进"});

但不适用于选择标签

this.navCtrl.parent.select(2,{动画:真，方向:前进"});

提前致谢

解决方案

Ionic 目前无法做到这一点，但您可以使用

要安装它，只需运行

npm i --save ionic2-super-tabs

然后将 SuperTabsModule.forRoot() 导入您应用的主模块中

import { SuperTabsModule } from 'ionic2-super-tabs';@NgModule({...进口:[...SuperTabsModule.forRoot()],...})导出类 AppModule {}

现在一切都准备好了，所以在你看来你可以这样做:

<超级标签><super-tab [root]="page1" title="首页" icon="home"></super-tab><super-tab [root]="page2" title="第二页" icon="pin"></super-tab><super-tab [root]="page3" title="第三页" icon="heart"></super-tab></超级标签>

I have simple tabs template Ionic 3 application in which, I am switching between the tabs whenever user swipes on view based on left or right I am switching between Tabs and All working fine accept there is no Animation effects when Page transition happens from tapping the tabs or from swiping the screen.

I am getting the Animation for page pushing and popping

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

but not for selecting Tabs

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

Thanks in advance

解决方案

That's currently not possible with Ionic, but you can use this amazing plugin to achieve something like this:

In order to install it, just run

npm i --save ionic2-super-tabs

And then import SuperTabsModule.forRoot() in your app's main module

import { SuperTabsModule } from 'ionic2-super-tabs';

@NgModule({
    ...
    imports: [
      ...
      SuperTabsModule.forRoot()
      ],
    ...
})
export class AppModule {}

Now everything is ready, so in your view you can do something like this:

<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 中的页面过渡动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！