在Angular中，你可以使用路由转场动画来为页面切换时提供动画效果。路由转场动画可以通过Angular的动画系统来实现。以下是实现路由转场动画的基本步骤：

1. 导入相关模块和动画函数：

首先，确保你已经导入了@angular/animations模块和所需的动画函数。通常，router-outlet用于处理路由的转场动画。
// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [BrowserAnimationsModule, RouterModule.forRoot(routes)],
  ...
})
export class AppModule { }

2. 定义路由转场动画：

在一个单独的文件中，你可以定义路由转场动画。下面是一个简单的例子：
// route-animations.ts
import { trigger, transition, style, query, animate } from '@angular/animations';

export const routeAnimations = trigger('routeAnimations', [
  transition('* => *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ]),
    query(':enter', [style({ opacity: 0 })]),
    query(':leave', [animate('300ms', style({ opacity: 0 }))]),
    query(':enter', [animate('300ms', style({ opacity: 1 }))])
  ])
]);

在上述例子中，routeAnimations 触发器定义了从一个页面到另一个页面的转场动画，包括了进场和离场时的动画效果。

3. 在路由配置中使用动画：

在路由配置中，使用data属性将动画函数传递给要应用动画的路由。
// app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { routeAnimations } from './route-animations';

const routes: Routes = [
  { path: '', component: HomeComponent, data: { animation: 'Home' } },
  { path: 'about', component: AboutComponent, data: { animation: 'About' } },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 在组件模板中应用动画：

在组件的模板中，使用[@triggerName]语法来应用动画。
<!-- app.component.html -->
<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

在组件中，创建一个方法 prepareRoute 来获取路由的动画信息：
// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { routeAnimations } from './route-animations';

@Component({
  selector: 'app-root',
  template: `
    <div [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  `,
  animations: [routeAnimations],
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet): any {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

在上述例子中，prepareRoute 方法返回要应用的动画名称，该名称存储在路由的 data 属性中。

通过这种方式，你可以为不同的路由配置不同的转场动画，并在整个应用中共享和重复使用这些动画效果。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4983/Angular