Angular父子组件动画同时执行时父组件动画不渲染问题

问题分析 #

父组件的tabTransition动画仅显示最终状态、无过渡效果，核心原因有两点：

1. 使用state('*')配合参数传递的方式，Angular对数字类型的状态值变更检测不敏感，无法触发*=>*的过渡逻辑；
2. 路由切换与父组件状态变更同步执行时，子组件的销毁/创建会干扰父组件的动画生命周期，导致过渡被中断。

解决方案 #

方案1：使用数值专用过渡触发器 #

利用Angular的:increment/:decrement特殊过渡，专门针对数值类型的状态变化触发动画，无需依赖state定义：

父组件动画修改：

@Component({
  // ...
  animations: [
    trigger('tabTransition', [
      // 匹配数值递增/递减的状态变化
      transition(':increment, :decrement', [
        // 先应用当前位置样式，再动画到目标位置
        style({ transform: 'translateX({{currentPos}}%)' }),
        animate('700ms ease', style({ transform: 'translateX({{targetPos}}%)' })),
        // 确保子组件动画同步执行
        query('@*', animateChild(), { optional: true })
      ], { params: { currentPos: 0, targetPos: 0 } })
    ])
  ]
})
export class ParentComponent {
  public currentSelection = 0;

  public changeTab(tabIndex: number): void {
    this.currentSelection = tabIndex;
  }
}

模板绑定修改：

<div [@tabTransition]="{
  value: currentSelection,
  params: {
    currentPos: (currentSelection - (currentSelection > 0 ? 1 : -1)) * 100,
    targetPos: currentSelection * 100
  }
}"></div>
<router-outlet></router-outlet>

方案2：分离状态变更与路由导航 #

如果路由切换是在changeTab中同步执行的，会打断父组件动画，需等待父组件动画完成后再导航：

模板添加动画完成监听：

<div 
  [@tabTransition]="{value: currentSelection, params: {position: currentSelection * 100}}"
  (@tabTransition.done)="onTabAnimationComplete(targetTab)"
></div>
<router-outlet></router-outlet>

父组件逻辑修改：

import { Router } from '@angular/router';
import { ChangeDetectorRef } from '@angular/core';

@Component({/* ... */})
export class ParentComponent {
  public currentSelection = 0;
  private targetTab: number;

  constructor(
    private router: Router,
    private cdr: ChangeDetectorRef
  ) {}

  public changeTab(tabIndex: number): void {
    this.targetTab = tabIndex;
    this.currentSelection = tabIndex;
    // 强制触发变更检测，确保动画状态被捕捉
    this.cdr.detectChanges();
  }

  public onTabAnimationComplete(): void {
    // 动画完成后执行路由导航
    this.router.navigate(['/your-route-path', this.targetTab]);
  }
}

方案3：修正state定义方式 #

如果坚持使用state，将状态值转为字符串，并为每个可能的状态（或通配符）明确样式逻辑：

trigger('tabTransition', [
  state('*', style({ transform: 'translateX({{position}}%)' }), { params: { position: 0 } }),
  // 明确匹配从任意状态到任意状态的变更，包括字符串类型状态
  transition('* <=> *', [
    animate('700ms ease'),
    query('@*', animateChild(), { optional: true })
  ])
])

模板绑定修改（将数字转为字符串）：

<div [@tabTransition]="{
  value: currentSelection.toString(),
  params: { position: currentSelection * 100 }
}"></div>

内容的提问来源于stack exchange，提问作者Andrei Roșu-Cojocaru