Angular相同QuestionComponent路由切换时过渡动画未触发问题求解

问题根因 #

你遇到的问题核心是Angular默认不会在同路由组件仅参数变化时销毁重建组件实例，因此既不会触发路由层面的enter/leave动画，也不会触发组件内基于void状态的入场退场动画。

方案1：修复路由过渡动画 #

步骤1：修正路由动画状态判断 #

默认相同的状态值不会触发过渡，你需要将路由参数拼接至动画状态标识中，让不同题目对应不同的状态值：

1. 在根组件模板给路由出口绑定动画触发器，注意传入参数包含路由参数：

<!-- app.component.html -->
<div [@routeAnimations]="getRouteAnimationState(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

2. 根组件添加状态获取方法：

// app.component.ts
getRouteAnimationState(outlet: RouterOutlet) {
  const animation = outlet.activatedRouteData?.animation || '';
  const questionId = outlet.activatedRoute?.snapshot?.params?.['question'] || '';
  return `${animation}-${questionId}`;
}

步骤2：给所有query添加可选配置 #

Angular路由动画中如果query找不到对应元素会直接终止动画，所有query都需要添加{optional: true}参数：

transition('*Question* <=> *Question*', [
  group([ 
    query(':leave', [
      style({ transform: 'translateX(0%)', zIndex: 20 }),
    ], { optional: true }),
    query(':leave .character', [
      style({ transform: 'translateY(0%)', opacity: 1 }),
      animate('600ms cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateY(20%)', opacity: 0 }))
    ], { optional: true }),
    // 剩余所有query都添加{ optional: true }配置
  ])
])

方案2：修复组件内动画 #

因为组件不会销毁重建，不能用基于void状态的过渡，需要手动监听参数变化切换动画状态：

步骤1：修改动画触发器为状态驱动 #

trigger('fadeOutIn', [
  state('show', style({ opacity: 1, transform: 'translateY(0px)' })),
  state('hide', style({ opacity: 0, transform: 'translateY(50px)' })),
  transition('show => hide', [animate('300ms ease')]),
  transition('hide => show', [animate('500ms 0.5s ease')])
])

步骤2：监听路由参数变化触发动画 #

// question.component.ts
animState = 'show';
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    // 先切到隐藏状态触发退场动画
    this.animState = 'hide';
    setTimeout(() => {
      // 这里更新当前题目的业务数据
      this.loadQuestion(params['question']);
      // 切回显示状态触发入场动画
      this.animState = 'show';
    }, 300) // 等待时间和退场动画时长保持一致
  })
}

步骤3：模板绑定动画状态 #

<div class="inner-section" [@fadeOutIn]="animState"></div>

额外注意事项 #

• 如果配置了路由复用策略，请关闭QuestionComponent的复用规则，或配置为路由参数变化时销毁实例
• 确保已经在对应模块导入了BrowserAnimationsModule，没有导入动画模块所有动画都不会生效

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