Вместо прикрепления анимации к каждому компоненту, который перенаправляется, например, в qaru.site/info/1006984/..., или как в первой части официальной документации. Пример:
В
hero-detail.component.ts
:import { Component, OnInit } from '@angular/core'; import { fadeInOutAnimation } from "app/app-routing.animation"; @Component({ selector: 'app-home', templateUrl: './home.component.html', animations: [ fadeInOutAnimation(300) ] }) export class HomeComponent{ }
В
app-routing.animation.ts
:import { trigger, state, style, animate, transition } from '@angular/animations'; export const fadeInOutAnimation = function (fadeInTimeMS) { return trigger('fadeInOut', [ transition(':enter', [ // :enter is alias to 'void => *' style({ opacity: 0 }), animate(fadeInTimeMS, style({ opacity: 1 })) ]), transition(':leave', [ // :leave is alias to '* => void' animate(fadeInTimeMS, style({ opacity: 0 })) ]) ]) }
Я хочу анимировать маршруты по маршрутным маршрутам:
Применение анимации маршрута к отдельным компонентам работает для простой демонстрации, но в реальном приложении лучше анимировать маршруты, основанные на маршрутах маршрута.
как указано в конце "Добавление анимаций в маршрутизируемый компонент" в угловой документации. Однако он не расширяет, как это сделать.