Ionic 3如何实现类WhatsApp的Tab滑动切换过渡动画？

嘿，完全懂你不想折腾现有组件的心情——毕竟已经把三个标签页都做好了，再迁移到ion-slides里重构代码太麻烦。其实不用动组件结构，咱们可以通过监听Tabs的切换事件+自定义CSS动画，就能实现类似WhatsApp的左右滑动过渡效果，下面给你一步步来：

步骤1：在组件中监听Tabs切换事件 #

你已经给<ion-tabs>加了#Tabs的引用，咱们直接用它来监听切换事件，判断滑动方向并触发动画：

import { Component, ViewChild } from '@angular/core';
import { Tabs } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('Tabs') tabs: Tabs;
  currentTabIndex = 0;

  // 你的三个标签页路由
  disponiveisRoot = 'DisponiveisPage';
  meusPedidosRoot = 'MeusPedidosPage';
  finalizadosRoot = 'FinalizadosPage';

  constructor() {}

  ionViewDidLoad() {
    // 监听标签切换前的事件
    this.tabs.ionTabsWillChange.subscribe((targetTab) => {
      const targetIndex = this.tabs.getIndex(targetTab);
      const tabContent = document.querySelector('.tab-content');
      
      if (tabContent) {
        // 根据切换方向添加对应的动画类
        if (targetIndex > this.currentTabIndex) {
          tabContent.classList.add('slide-from-left');
        } else {
          tabContent.classList.add('slide-from-right');
        }

        // 动画结束后移除类，避免影响下次切换
        tabContent.addEventListener('animationend', () => {
          tabContent.classList.remove('slide-from-left', 'slide-from-right');
        }, { once: true });
      }

      this.currentTabIndex = targetIndex;
    });
  }
}

步骤2：添加自定义CSS动画 #

在对应页面的SCSS文件里，添加滑动过渡的动画样式：

.tab-content {
  position: relative;
  overflow: hidden;
}

// 从左侧滑入（切换到右侧标签）
@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// 从右侧滑入（切换到左侧标签）
@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-from-left {
  animation: slideFromLeft 0.3s ease-out forwards;
}

.slide-from-right {
  animation: slideFromRight 0.3s ease-out forwards;
}

进阶优化：更贴近WhatsApp的双向滑动效果 #

上面的方法是让整个内容容器做滑动，如果想让新旧标签页同时产生滑出/滑入的效果（更像WhatsApp），可以调整CSS和事件逻辑：

更新CSS样式 #

.tab-content {
  position: relative;
  height: 100%;
}

.tab-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// 旧标签页滑出动画
@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

// 新标签页滑入动画
@keyframes slideInLeft {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.tab-leave-left {
  animation: slideOutLeft 0.3s ease-out forwards;
}

.tab-leave-right {
  animation: slideOutRight 0.3s ease-out forwards;
}

.tab-enter-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.tab-enter-right {
  animation: slideInRight 0.3s ease-out forwards;
}

更新组件中的事件逻辑 #

ionViewDidLoad() {
  this.tabs.ionTabsWillChange.subscribe((targetTab) => {
    const targetIndex = this.tabs.getIndex(targetTab);
    const currentTabPane = document.querySelector('.tab-pane.show');
    const targetTabPane = document.querySelectorAll('.tab-pane')[targetIndex];
    
    if (currentTabPane && targetTabPane) {
      // 根据切换方向给新旧标签页加动画类
      if (targetIndex > this.currentTabIndex) {
        // 向右切换：当前标签左滑出，目标标签右滑入
        currentTabPane.classList.add('tab-leave-left');
        targetTabPane.classList.add('tab-enter-right');
      } else {
        // 向左切换：当前标签右滑出，目标标签左滑入
        currentTabPane.classList.add('tab-leave-right');
        targetTabPane.classList.add('tab-enter-left');
      }

      // 动画结束后清除所有动画类
      setTimeout(() => {
        currentTabPane.classList.remove('tab-leave-left', 'tab-leave-right');
        targetTabPane.classList.remove('tab-enter-right', 'tab-enter-left');
      }, 300); // 时长和动画保持一致
    }

    this.currentTabIndex = targetIndex;
  });
}

这两种方案都不需要你修改现有的三个标签页组件结构，完全基于现有的<ion-tabs>做扩展，直接套用就能实现类似WhatsApp的切换动画啦～

内容的提问来源于stack exchange，提问作者Matheus Lima