Ionic 2中选项卡之间转换时的动画 [英] Animation when transition between tabs in Ionic 2

问题描述

我有一个带有基本标签的离子2应用程序。

I have an ionic 2 app with basic tabs.

<ion-tabs selectedIndex="1">
  <ion-tab [root]="tab1Root" tabTitle="hunts" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="hunting" tabIcon="locate"></ion-tab>
</ion-tabs>

标签显示完美。但我想在标签之间转换时有一个滑动动画。也就是说，当我从中间选项卡按下最右边的选项卡时，中间选项卡应向左滑动，最右边的选项卡应从右侧滑入。这是一个基本的Android动画。

The tabs appears perfectly. But I would like to have a sliding animation when transitioning between tabs. That is, when I press the rightmost tab from the middle tab, middle tab should slide to left and rightmost tab should slide in from right. This is a basic android animation.

我无法找到有关如何完成此任务的任何细节。这在Ionic（2.2.0）中仍然不可能吗？

I am unable to find any details on how to accomplish this. Is this still not possible in Ionic (2.2.0) ?

推荐答案

开始之前

$ ionic cordova plugin add com.telerik.plugins.nativepagetransitions
$ npm install --save @ionic-native/native-page-transitions

然后在 <$中导入插件 c $ c> src / app / app.module.ts 以下方式

Then import the plugin in your src/app/app.module.ts the following way

import { NativePageTransitions } from '@ionic-native/native-page-transitions';

将其添加为提供商。

  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    StatusBar,
    SplashScreen,
    NativePageTransitions // <-- add me here
  ]

转到你的 src / pages / tabs / tabs.ts

Go to your src/pages/tabs/tabs.ts

导入插件

import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

将插件添加到构造函数

  constructor(public navCtrl: NavController,
              private nativePageTransitions: NativePageTransitions) {
  }

添加这两个变量

loaded:   boolean = false;
tabIndex: number  = 0;

然后添加这两个功能

  private getAnimationDirection(index:number):string {
    var currentIndex = this.tabIndex;

    this.tabIndex = index;

    switch (true){
      case (currentIndex < index):
        return('left');
      case (currentIndex > index):
        return('right');
    }
  }

  public transition(e:any):void {    
    let options: NativeTransitionOptions = {
     direction:this.getAnimationDirection(e.index),
     duration: 250,
     slowdownfactor: -1,
     slidePixels: 0,
     iosdelay: 20,
     androiddelay: 0,
     fixedPixelsTop: 0,
     fixedPixelsBottom: 48
    };

    if (!this.loaded) {
      this.loaded = true;
      return;
    }

    this.nativePageTransitions.slide(options);
  }

然后转到 src / pages / tabs / tabs.html
按以下方式修改ion-tabs标记：

Then go to src/pages/tabs/tabs.html Modify the ion-tabs tag the following way :

<ion-tabs (ionChange)="transition($event)">

或

<ion-tabs (ionSelect)="transition($event)">

享受。

编辑
如果要修改动画，以下是您需要的所有信息。
http://plugins.telerik.com/cordova/plugin/原生页面转换

这篇关于Ionic 2中选项卡之间转换时的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！