Angular2 :leave 过渡动画失效问题求助

我之前在Ionic 2里折腾Angular动画时，也碰到过和你一模一样的:leave动画不生效的坑！结合你的代码来看，核心问题大概率是Ionic组件的DOM操作逻辑和Angular动画的触发时机没对齐，咱们一步步来搞定它：

先分析问题根源 #

你的动画代码本身语法是对的，但Ionic的ion-item这类组件在被隐藏时，默认会通过*ngIf或自身的隐藏逻辑直接从DOM中移除元素——而Angular的:leave动画需要元素在DOM中完成动画后再被移除，直接销毁的话动画根本没机会执行。另外，依赖:enter/:leave这种隐式状态转换，在Ionic的组件环境下也容易出现触发不及时的问题。

给你两个可行的解决方案 #

方案1：用明确状态替代隐式:enter/:leave

把动画改成基于显式状态的转换，避免依赖Ionic的DOM销毁逻辑：

// 组件中的动画定义
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  // ...其他元数据
  animations: [
    trigger('itemToggle', [
      // 定义显式状态：显示/隐藏
      state('show', style({ opacity: 1, height: '*', padding: '16px 0', margin: '0' })),
      state('hide', style({ opacity: 0, height: 0, padding: 0, margin: 0, overflow: 'hidden' })),
      // 状态转换动画
      transition('show => hide', animate('700ms ease-in')),
      transition('hide => show', animate('700ms ease-in'))
    ])
  ]
})

模板里绑定状态，先通过动画让元素“消失”，再在动画完成后决定是否移除：

<ion-item [@itemToggle]="itemStatus" (@itemToggle.done)="handleAnimationDone($event)">
  <!-- 你的项内容 -->
</ion-item>
<button (click)="toggleItem()">点击隐藏</button>

组件里的逻辑控制：

itemStatus: 'show' | 'hide' = 'show';
// 如果需要最终移除元素，加个变量控制
isItemExist = true;

toggleItem() {
  this.itemStatus = this.itemStatus === 'show' ? 'hide' : 'show';
}

handleAnimationDone(event: any) {
  // 隐藏动画完成后，再移除元素（可选）
  if (event.toState === 'hide') {
    // 这里可以延迟一点，确保动画完全结束
    setTimeout(() => {
      this.isItemExist = false;
    }, 100);
  }
}

方案2：调整*ngIf的触发时机（如果一定要用）

如果你坚持用*ngIf，需要确保动画完成后再让*ngIf变为false。可以借助Angular的动画完成事件：

// 动画定义保留你的原代码，但要绑定状态
trigger('show', [
  state('void', style({ opacity:0 })),
  state('*', style({ opacity:1 })),
  transition(':enter', animate('700ms ease-in')),
  transition(':leave', animate('700ms ease-in'))
])

模板修改：

<ion-item [@show]="isVisible ? '*' : 'void'" (@show.done)="onLeaveDone()" *ngIf="isItemRendered">
  <!-- 内容 -->
</ion-item>
<button (click)="startHideAnimation()">点击隐藏</button>

组件逻辑：

isVisible = true;
isItemRendered = true;

startHideAnimation() {
  this.isVisible = false; // 触发leave动画
}

onLeaveDone() {
  // 动画完成后，再移除元素
  if (!this.isVisible) {
    this.isItemRendered = false;
  }
}

最后要注意的细节 #

1. 确保你的AppModule里已经导入了BrowserAnimationsModule，否则Angular动画根本不会生效；
2. Ionic的ion-item有默认的padding、margin样式，动画时最好把这些也加入状态，避免隐藏时出现突兀的布局跳动。

内容的提问来源于stack exchange，提问作者Khaled Ramadan