如何等待动画结束后再跳转至下一路由？已尝试方案未生效

嘿，我懂你现在的困扰——把示例里的动画代码搬到自己项目里，从/login跳转到/home的时候，动画却没按预期跑起来对吧？我之前在做Angular路由动画的时候也踩过类似的坑，给你几个实用的解决方向：

• 确保路由动画的全局触发配置正确
  首先得在根组件（比如AppComponent）里设置路由动画的触发器，并且绑定到<router-outlet>上，这样路由切换时才能触发动画。同时要给路由配置加上标识动画状态的data属性：

  1. 根组件代码示例：

     // app.component.ts
     import { trigger, transition, useAnimation } from '@angular/animations';
     import { loginAnimation } from './login.animation';
     import { RouterOutlet } from '@angular/router';
     
     @Component({
       selector: 'app-root',
       template: `
         <router-outlet [@routeAnimations]="prepareRoute(outlet)"></router-outlet>
       `,
       animations: [
         trigger('routeAnimations', [
           // 匹配login到home的路由切换，应用login动画
           transition('login => home', useAnimation(loginAnimation)),
           // 如果需要从home退回login的反向动画，可以添加这一行
           transition('home => login', useAnimation(loginAnimation, {
             params: { reverse: true }
           }))
         ])
       ]
     })
     export class AppComponent {
       prepareRoute(outlet: RouterOutlet) {
         // 从路由的data中获取动画状态标识
         return outlet?.activatedRouteData?.['animation'];
       }
     }
     

  2. 路由配置示例：

     // app-routing.module.ts
     const routes: Routes = [
       { 
         path: 'login', 
         component: LoginComponent,
         data: { animation: 'login' } // 给login路由标记动画状态
       },
       { 
         path: 'home', 
         component: HomeComponent,
         data: { animation: 'home' } // 给home路由标记动画状态
       }
     ];
     

• 调整login.animation.ts适配路由切换场景
  你提供的动画代码用了sequence、stagger等API，但要确保它是针对路由组件的进入/离开状态设计的。比如可以调整为针对路由切换的过渡动画：

  // login.animation.ts
  import { sequence, trigger, stagger, animate, style, group, query, transition, keyframes, animateChild, state } from '@angular/animations';
  
  const query = (s,a,o={optional:true})=>query(s,a,o);
  
  export const loginAnimation = sequence([
    // 处理进入的路由组件（home）
    query(':enter', [
      style({ opacity: 0, transform: 'translateY(20px)' }),
      stagger(100, [
        animate('0.5s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ], { optional: true }),
    // 处理离开的路由组件（login）
    query(':leave', [
      animate('0.3s ease-in', style({ opacity: 0, transform: 'translateY(-20px)' }))
    ], { optional: true })
  ]);
  

  如果你的动画原本是login组件内部元素的动画，记得要确保query能正确匹配到目标元素，必要时可以给元素加上类名来精准选择。

• 确认路由跳转的方式正确
  一定要用Angular的Router服务来做跳转，别用window.location.href这种刷新页面的方式——刷新会直接重置组件，动画根本没机会执行。示例代码：

  // login.component.ts
  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  handleLoginSuccess() {
    // 正确的路由跳转方式
    this.router.navigate(['/home']);
  }
  

• 实用调试技巧

  • 打开浏览器开发者工具的Elements面板，观察路由组件元素在跳转时的样式变化，看看动画的CSS属性（比如opacity、transform）有没有被应用；
  • 用Angular DevTools查看动画的执行状态，确认动画是否被正确触发；
  • 在动画代码里临时加入console.log，检查动画函数是否被调用。

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