Angular中根据导航方向设置不同View Transition动画的问题

要实现前进时右侧滑入、后退时反向滑动的View Transition效果，可以通过路由导航事件判断方向 + CSS类切换动画的方式实现，具体步骤如下：

1. 启用路由的View Transition #

首先在路由配置中开启withViewTransitions：

import { provideRouter, withViewTransitions } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withViewTransitions())
  ]
};

2. 监听路由导航，标记方向 #

在根组件（比如AppComponent）中监听路由导航事件，判断当前是前进还是后退导航，给页面根元素添加方向类：

import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const currentNavId = this.router.getCurrentNavigation()?.navigationId;
      const lastNavId = this.router.lastSuccessfulNavigation?.navigationId;
      const isBack = currentNavId && lastNavId && currentNavId < lastNavId;
      document.body.classList.toggle('back-transition', isBack);
    });
  }
}

3. 编写方向对应的CSS动画 #

通过CSS的View Transition伪元素，结合添加的类来切换动画方向：

/* 默认前进动画：新页面从右侧滑入，旧页面滑出到左侧 */
::view-transition-old(root) {
  animation: slide-out-forward 0.3s ease-in-out forwards;
}
::view-transition-new(root) {
  animation: slide-in-forward 0.3s ease-in-out forwards;
}

@keyframes slide-in-forward {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slide-out-forward {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* 后退动画：反向滑动 */
.back-transition ::view-transition-old(root) {
  animation: slide-out-back 0.3s ease-in-out forwards;
}
.back-transition ::view-transition-new(root) {
  animation: slide-in-back 0.3s ease-in-out forwards;
}

@keyframes slide-in-back {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slide-out-back {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

补充说明 #

• 原生startViewTransition确实不支持types参数，你看到的指南内容可能是自定义扩展或错误信息；
• Angular的withViewTransitions已经封装了原生API的调用，不需要手动调用startViewTransition；
• 通过路由的navigationId判断前进/后退是可靠的方案：每次前进导航navigationId递增，后退则使用之前的navigationId，因此可以通过对比当前和上一次的ID来判断方向。

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