[angular] 第1880天 请说说在Angular中如何定义路由过渡动画？ about fe-interview HOT 1 OPEN

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // 其他模块
  ],
  // 其他配置
})
export class AppModule { }

import { trigger, transition, style, query, group, animate } from '@angular/animations';

export const slideInAnimation = trigger('routeAnimations', [
  transition('* <=> *', [
    // 设置初始样式
    query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
    // 离开页面的动画
    query(':leave', [
      style({ transform: 'translateX(0%)' }),
      animate('300ms ease-in-out', style({ transform: 'translateX(-100%)' }))
    ], { optional: true }),
    // 进入页面的动画
    query(':enter', [
      style({ transform: 'translateX(100%)' }),
      animate('300ms ease-in-out', style({ transform: 'translateX(0%)' }))
    ], { optional: true })
  ])
]);

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './app.animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [slideInAnimation]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

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