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

问题描述

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

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

  this.navCtrl.push（ContactPage，{
 animation：true，direction：'forward'
}）; 
  

但不是用于选择标签

  this.navCtrl.parent.select（2，{
 animation：true，direction：'forward'
}）; 
  

提前致谢

解决方案

Ionic现在无法做到这一点，但您可以使用

为了安装它，只需运行

  npm i --save ionic2-super-tabs 
  

然后在您应用的主模块中导入 SuperTabsModule.forRoot（）

 从'ionic2-super-tabs'导入{SuperTabsModule}; 
 
 @NgModule（{
 ... 
进口：[
 ... 
 SuperTabsModule.forRoot（）
]，
 ... 
}）
导出类AppModule {} 
  

现在一切准备就绪，所以在你看来你可以这样做：

 < super-tabs> 
< super-tab [root] =page1title =First pageicon =home>< / super-tab> 
< super-tab [root] =page2title =Second pageicon =pin>< / super-tab> 
< super-tab [root] =page3title =Third pageicon =heart>< / super-tab> 
< / super-tabs> 
  

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屋！