如何在Angular的问题路由之间添加动画？

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。integral100x正在寻找来自信誉良好的来源的答案。

我正在Angular 9中使用测验应用程序，并且我尝试在问题路径之间添加动画，例如：question / 1，question / 2等。现在，动画在第一个问题以及最后一个问题和结果之间的过渡。当我单击DIQuizComponent中的上一个或下一个按钮时，似乎不起作用。不确定如何解决它。请您在下面看到我的代码。

router-animations.ts：

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

export class RouterAnimations {
  static routeSlide =
    trigger('routeSlide', [
      transition('* <=> *', [
        group([
          query(':enter', [
            style({transform: 'translateX({{offsetEnter}}%)'}),
            animate('0.4s ease-in-out', style({transform: 'translateX(0%)'}))
          ], {optional: true}),
          query(':leave', [
            style({transform: 'translateX(0%)'}),
            animate('0.4s ease-in-out', style({transform: 'translateX({{offsetLeave}}%)'}))
          ], {optional: true}),
        ])
      ]),
    ]);
}

quiz-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { IntroductionComponent } from '../containers/introduction/introduction.component';
import { DependencyInjectionQuizComponent } from '../containers/dependency-injection-quiz/dependency-injection-quiz.component';
import { ResultsComponent } from '../containers/results/results.component';

const routes: Routes = [
  { path: '', redirectTo: 'intro', pathMatch: 'full' },
  { path: 'intro', component: IntroductionComponent, pathMatch: 'full' },
  { path: 'question', component: DependencyInjectionQuizComponent, pathMatch: 'full' },
  { path: 'question/:questionIndex', component: DependencyInjectionQuizComponent, pathMatch: 'full' },
  { path: 'results', component: ResultsComponent, pathMatch: 'full' }
];

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

app.component.html：

<main class="container grid-sm">
  <router-outlet></router-outlet>
</main>

route-reuse-strategy.ts：

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';

import { DependencyInjectionQuizComponent } from '../containers/dependency-injection-quiz/dependency-injection-quiz.component';


export class CustomReuseStrategy implements RouteReuseStrategy {
  handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.routeConfig.path] = null;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig) {
      return null;
    }
    return this.handlers[route.routeConfig.path];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return curr.component !== DependencyInjectionQuizComponent;
  }
}

内部di-quiz.component.ts：

  private setupRouting() {
    this.prev$ = this.questionChange$
      .pipe(
        map(questionIndex => questionIndex === 0 ? questionIndex : questionIndex - 1),
        share()
      );
    this.next$ = this.questionChange$
      .pipe(
        map(questionIndex => questionIndex === this.questions.length - 1 ? questionIndex : questionIndex + 1),
        share()
      );

    this.routeTrigger$ = this.questionChange$
      .pipe(
        startWith(0),
        pairwise(),
        map(([prev, curr]) => ({
          value: curr,
          params: {
            offsetEnter: prev > curr ? 100 : -100,
            offsetLeave: prev > curr ? -100 : 100
          }
        })),
      );
  }

在di-quiz.component.html模板中：

<mat-card [@routeSlide]="routeTrigger$ | async">
...
  <mat-card-footer>
    <section class="paging">
      <mat-card-actions>
        <div
          class="prev-question-nav"
          *ngIf="question && questionIndex > 1">
          <button
            type="button"
            mat-raised-button
            (click)="prevQuestion()"
            [routerLink]="prev$ | async"
            [class.disabled]="(questionChange$ | async) === 0">
            <strong>&laquo; Previous</strong>
          </button>
        </div>

        <div
          class="next-question-nav"
          *ngIf="question && questionIndex !== totalQuestions">
          <button
            type="button"
            mat-raised-button
            (click)="nextQuestion()"
            [routerLink]="next$ | async"
            [class.disabled]="(questionChange$ | async) === questions.length - 1">
            <strong>Next &raquo;</strong>
          </button>
        </div>

        <div
          class="show-score-nav"
          *ngIf="question && questionIndex === totalQuestions">
          <button type="button" mat-raised-button (click)="results()"
                  disableRipple="true" class="btn btn-outline-primary">
            <strong>Show Your Score</strong>
          </button>
        </div>
      </mat-card-actions>
    </section>
</mat-card>

questions-routing.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class QuestionsRoutingService {
  questionChange$ = new BehaviorSubject<number>(0);
}

Answer 1

我已经准备了一个带有动画的小型演示，然后导航到新路线https://stackblitz.com/edit/angular-7uu97i。

想法是您开始动画，等待它完成，然后导航到下一条路线。您可以以演示为例。

希望对您有帮助。