在 Ionic 2 中的选项卡之间过渡时的动画

Question

我有一个带有基本选项卡的 ionic 2 应用程序。

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

选项卡完美显示。但是我想在选项卡之间过渡时有一个滑动动画。也就是说，当我从中间选项卡按下最右侧的选项卡时，中间选项卡应该向左滑动，最右侧选项卡应该从右侧滑入。这是一个基本的安卓动画。

我无法找到有关如何完成此操作的任何详细信息。这在离子(2.2.0(中仍然不可能吗？

Answer 1

我刚才想出了不同的解决方案......呵呵这是一个有趣的想法，一个原始的想法，但它在 2 分钟内给你一半的过渡感觉

纯 CSS：

1. 在全局应用程序的 scss 文件中，创建一个 css 选择器，该选择器将抓取加载到<离子标签>的路由器插座中的组件>
2. 在开始:P添加 css 动画 - 每次插入新组件时都会运行

app-e-tabs ion-router-outlet > .ion-page { 
  animation: fadeIn 0.3s 1 forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 5vh, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

当然，可能有成千上万个可能的问题，它永远不会看起来像正确的页面过渡......但它比没有:)

编辑：正如一些人指出的那样，您应该从 css 的第一行中删除app-e-tabs - 它是我应用程序中模块的名称 - 这就是它落在我的代码中的原因。

Answer 2

开始之前

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

然后按以下方式将插件导入 src/app/app.module.ts

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

并将其添加为提供程序。

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

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

导入插件

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

将插件添加到构造函数

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

添加这 2 个变量

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 (ionChange)="transition($event)">

或

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

编辑离子 4

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

享受。

PS：您可以在我的 gist glemiere/58d1707ba82d40a55967601dbd0e72c9 上找到完整的代码。

编辑如果要修改动画，以下是您需要的所有信息。http://plugins.telerik.com/cordova/plugin/native-page-transitions