Ionic页面动画问题：如何实现从右向左滑动打开页面

我之前也碰到过这个需求——默认的页面打开动画是从下往上，完全不符合设计里从右向左滑动的要求，下面给你两种靠谱的实现方案，你可以根据自己的场景选：

方案一：给单次导航设置自定义动画 #

这种方式适合只需要在特定页面跳转时使用该动画的场景：

1. 先创建一个动画定义文件，比如 slide-in-right.animation.ts，写入自定义动画逻辑：

import { Animation, AnimationController } from '@ionic/angular';

export function slideInRightAnimation(animationCtrl: AnimationController, baseEl: HTMLElement) {
  // 创建动画实例，设置持续时间、缓动曲线，以及从右侧滑入的变换
  const animation = animationCtrl.create()
    .addElement(baseEl)
    .duration(300) // 动画时长，可按需调整
    .easing('cubic-bezier(0.36, 0.66, 0.04, 1)') // 缓动曲线，模拟自然滑动
    .fromTo('transform', 'translateX(100%)', 'translateX(0)') // 从右侧100%位置滑到初始位置
    .fromTo('opacity', '0', '1'); // 伴随淡入效果

  return animation;
}

2. 在需要触发跳转的页面组件中，注入 AnimationController 和 NavController，然后在跳转时指定这个动画：

import { Component } from '@angular/core';
import { AnimationController, NavController } from '@ionic/angular';
import { slideInRightAnimation } from './slide-in-right.animation';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(
    private navCtrl: NavController,
    private animationCtrl: AnimationController
  ) {}

  goToTargetPage() {
    // 使用自定义动画跳转目标页面
    this.navCtrl.navigateForward('/target-page', {
      animation: {
        animationBuilder: slideInRightAnimation,
        animationCtrl: this.animationCtrl
      }
    });
  }
}

方案二：全局配置默认动画（所有页面都用这个效果） #

如果希望所有页面的打开动画都是从右向左，可以直接在全局配置里修改：

在 app.module.ts 中，配置 IonicModule 时替换默认的导航动画：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AnimationController } from '@ionic/angular';

// 定义全局的从右向左滑入动画
function globalSlideInRight(animationCtrl: AnimationController, baseEl: HTMLElement) {
  return animationCtrl.create()
    .addElement(baseEl)
    .duration(300)
    .easing('cubic-bezier(0.36, 0.66, 0.04, 1)')
    .fromTo('transform', 'translateX(100%)', 'translateX(0)')
    .fromTo('opacity', '0', '1');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      navAnimation: globalSlideInRight // 设置全局默认导航动画
    }),
    AppRoutingModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

额外补充：模态框的从右向左动画实现 #

如果你的需求是模态框从右向左打开，也可以用类似的方式自定义进入/离开动画：

import { Component } from '@angular/core';
import { AnimationController, ModalController } from '@ionic/angular';
import { TargetModalComponent } from './target-modal/target-modal.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(
    private modalController: ModalController,
    private animationCtrl: AnimationController
  ) {}

  async openCustomModal() {
    const modal = await this.modalController.create({
      component: TargetModalComponent,
      // 自定义进入动画：从右滑入
      enterAnimation: (baseEl) => {
        return this.animationCtrl.create()
          .addElement(baseEl)
          .duration(300)
          .easing('cubic-bezier(0.36, 0.66, 0.04, 1)')
          .fromTo('transform', 'translateX(100%)', 'translateX(0)')
          .fromTo('opacity', '0', '1');
      },
      // 自定义离开动画：向左滑出（可选，配合进入动画更协调）
      leaveAnimation: (baseEl) => {
        return this.animationCtrl.create()
          .addElement(baseEl)
          .duration(300)
          .easing('cubic-bezier(0.36, 0.66, 0.04, 1)')
          .fromTo('transform', 'translateX(0)', 'translateX(-100%)')
          .fromTo('opacity', '1', '0');
      }
    });
    return await modal.present();
  }
}

注意事项 #

• 动画的 duration（时长）和 easing（缓动曲线）可以根据你的设计需求调整，比如把时长改成250ms或者用线性缓动 linear。
• 以上方案适用于Ionic 5及以上版本，如果你用的是更低版本，可能需要调整动画API的写法。
• 测试时记得在真实设备或模拟器上验证，浏览器里的动画效果可能和移动端有细微差别。

内容的提问来源于stack exchange，提问作者Miomir Dancevic