如何在 Ionic 4 中添加标签动画？

Question

我想在选项卡开关上添加向前和向后导航动画。

我想复制 Facebook 应用标签导航动画的当前状态。

我目前尝试在单个选项卡上添加一个方法来调用调用向前导航的函数。

<ion-tab-bar slot="bottom">
  <ion-tab-button (click)="goToListTab()" mode="md">
    <ion-icon name="list"></ion-icon>
    <ion-label>Orders</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToNewTab()" mode="md">
    <ion-icon name="add"></ion-icon>
    <ion-label>New Order</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToAccountTab()" mode="md">
    <ion-icon name="person"></ion-icon>
    <ion-label>Account</ion-label>
  </ion-tab-button>
</ion-tab-bar>

我的 .ts 文件具有调用导航的功能。为了简化，我只包括了一个。

goToAccountTab() {
    this.router.navigateBack('/tabs/account');
}

在 goToAccountTab 上，我希望它可以导航到带有 navigateBack 动画的帐户选项卡，但它成功地转到了帐户选项卡，但没有执行 navigateBack 动画。

Answer 1

使用 Ionic v4，我无法从选项卡控制器获取索引，但我通过保留选项卡的列表对象并以这种方式获取数字索引来解决此问题。

package.json

"@ionic/angular": "^4.9.1"
"@angular/core": "^8.2.7"
"com.telerik.plugins.nativepagetransitions": "^0.6.5",

Tabs.ts：

import { Component, OnInit, ViewChild } from '@angular/core';

import { IonTabs } from '@ionic/angular';

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


@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {

  @ViewChild('navTabs', { static: false }) navTabs: IonTabs;

  private tabs = {
    events: 0,
    notifications: 1,
    profile: 2
  };
  loaded = false;
  tabIndex = 0;

  constructor(
    private nativePageTransitions: NativePageTransitions
  ) { }

  private getAnimationDirection(e: any): string {

    const currentIndex = this.tabIndex;
    this.tabIndex = this.tabs[e.tab];

    switch (true) {
      case currentIndex > this.tabs[e.tab]:
        return 'left';
      case currentIndex < this.tabs[e.tab]:
        return 'right';
    }
  }

  transition(e: any): void {

    const options: NativeTransitionOptions = {
      direction: this.getAnimationDirection(e),
      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);
  }

}

Tabs.html

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

  <ion-tab-bar color="dark" slot="bottom">

    <ion-tab-button tab="events">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Events</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <ion-icon name="notifications"></ion-icon>
      <ion-label>Notification</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="barcode"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Answer 2

ionic 这样做的方式是使用 native page transitions 插件，即 no longer maintained 并且您遇到了我无法修复的错误（在制作动画时，您会看到两次页面）但这是我发现的最好的解决方案，因为 Ionic 没有正确地做到这一点（目前）。

所以，我把代码放在这里，它可能会有所帮助，也许你会找到解决办法;)

1. 运行

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

1. 导入到 app.module.ts

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

@NgModule({
  imports: [
    NativePageTransitions,
  ]
}

1. 在您的 tabs.page.ts 中添加动画逻辑

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

export class TabsPage {
loaded: boolean = false
tabIndex: number = 0

constructor(private nativePageTransitions: NativePageTransitions) {

  //Look the index to see which direction to go (if you have more than 3 tabs)
  private getAnimationDirection(e: any): string {
    var currentIndex = this.tabIndex

    this.tabIndex = e.index
    // or 
    // this.tabIndex = Object.keys(this.tabs).indexOf(e.tab)

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

  transition(e: any): void {
    let options: NativeTransitionOptions = {
      direction: this.getAnimationDirection(e),
      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)
  }
}

4. 在tabs.page.html里面

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

注意：
1. 对我来说，$event 给了我一个类似{tab: 'home'} 的对象，因为我正在通过一个标签数组创建带有循环的标签，所以我可以找到带有 Object.keys(tabs).indexOf($event.tab) 的索引
2.我也尝试过使用简单的角度路线动画，但是由于ionic将逻辑包装在ion-tabs中，它似乎不起作用