如何实现 Angular 路由动画？

Question

我正在尝试实现 angular 路线动画。我已经关注了文档并参考了这个视频：https://www.youtube.com/watch?v=7JA90VI9fAI. But I cannot get the animations working. Here is the code so far: https://stackblitz.com/edit/angular-animations-not-working

animations.ts

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

export const fader =
  trigger('routeAnimations', [
    transition('* <=> *', [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          left: 0,
          width: '100%',
          opacity: 0,
          transform: 'scale(0) translateY(100%)'
        })
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({
          opacity: 1, transform: 'scale(1) translateY(0)'
        })),
      ], { optional: true })
    ])
  ]);

app.component.html

<a [routerLink]="['home']">Home</a>&nbsp;&nbsp;&nbsp;<a [routerLink]="['hello']">Hello</a>
<div class="route-content" [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts

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

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

styles.css

.route-content {
  position: relative;
}

有人可以帮忙吗？

提前致谢。

Answer 1

您需要在路线中添加数据：{动画：'HomePage'}

  { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },

根据https://angular.io/guide/route-animations

如何实现 Angular 路由动画？

How to implement Angular Route Animations?

angular

angular-animations

animations.ts

app.component.html

app.component.ts

styles.css