Ionic中ion-menu无动画效果，如何为其添加开启和关闭的过渡动画？

第一步：先修复代码语法错误 #

现有HTML里的右侧容器属性引号错位，会导致contentId绑定失效，是动画异常的常见诱因：

<!-- 错误写法 -->
<div class="right> id="main">
<!-- 修正后写法 -->
<div class="right" id="main">

第二步：使用内置动画（最简单方案） #

ion-menu本身提供3种预制动画，直接给ion-menu标签加type属性即可触发：

• type="overlay"：菜单从侧边覆盖在内容层上方（最常用）
• type="push"：菜单滑入同时把内容层向另一侧推开
• type="reveal"：内容层向侧边滑开露出下方的菜单

修改后的ion-menu代码示例：

<ion-menu side="start" menuId="first" contentId="main" type="overlay">
  <ion-content>
    info
  </ion-content>
</ion-menu>

如果加了type属性后还是没有动画，检查全局Ionic配置是否禁用了动画：
找到项目中IonicModule.forRoot()的配置位置，确保没有设置animated: false，正确配置参考：

// app.module.ts 或对应根模块文件
IonicModule.forRoot({
  animated: true, // 全局开启动画，必须为true
  // 也可全局设置默认菜单动画
  menuType: 'overlay'
})

第三步：自定义动画（如果需要特殊效果） #

如果内置动画不符合需求，可以用Ionic提供的AnimationBuilder自定义开/关动画，示例代码如下：

import { AnimationBuilder, MenuController } from '@ionic/angular';

constructor(
  private menuController: MenuController,
  private animationBuilder: AnimationBuilder
) {}

// 自定义菜单开启动画
customMenuOpenAnimation = (baseEl: HTMLElement) => {
  const menu = baseEl.shadowRoot!.querySelector('.menu-inner') as HTMLElement;
  return this.animationBuilder.create()
    .addElement(menu)
    .duration(300)
    .easing('ease-out')
    .fromTo('transform', 'translateX(-100%)', 'translateX(0)')
    .fromTo('opacity', 0, 1);
};

// 自定义菜单关闭动画
customMenuCloseAnimation = (baseEl: HTMLElement) => {
  const menu = baseEl.shadowRoot!.querySelector('.menu-inner') as HTMLElement;
  return this.animationBuilder.create()
    .addElement(menu)
    .duration(250)
    .easing('ease-in')
    .fromTo('transform', 'translateX(0)', 'translateX(-100%)')
    .fromTo('opacity', 1, 0);
};

async openMenu() {
  const menu = await this.menuController.get('first');
  // 绑定自定义动画
  menu!.animated = true;
  menu!.animation = this.customMenuOpenAnimation;
  menu!.closeAnimation = this.customMenuCloseAnimation;
  await menu!.open();
}

内容的提问来源于stack exchange，提问作者Rodinei Cirineu