Маршрут должен измениться после запуска маршрута / анимации

Question

У меня есть анимация, которая запускается при смене маршрута. Это черный div, переводимый снизу вверх при закрытии всей страницы во время перехода.

Анимация для div работает нормально, но в настоящее время маршрут меняется одновременно с * Начало анимации 1005 * - вид разрушения всего перехода. Я хочу, чтобы маршрут был изменен, только когда div покрывает всю страницу, чтобы иметь плавный переход по маршруту.

Нужен ли другой подход?

app.component. html:

<router-outlet #myOutlet="outlet"></router-outlet>
<div class="transition-overlay" [@translate]="getDepth(myOutlet)"></div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('translate', [
      state('1', style({transform: 'translateY(100vh)'})),
      state('2', style({transform: 'translateY(-100vh)'})),
      transition('1=>2', [ animate('1500ms ease-in-out')]),
      transition('2=>1', [ animate('1500ms ease-in-out')])
    ])
  ]
})
export class AppComponent implements OnInit, AfterViewInit {

  ...

  getDepth(outlet) {
    return outlet.activatedRouteData['depth'];
  }

}

app-routing.module.ts:

const routes: Routes = [
  {path: '', component: HomeComponent, data: { depth: 1 }},
  {path: 'cases', component: WorkComponent, data: { depth: 2 }},
];

Answer 1

Используйте Router Resolver, чтобы дождаться окончания анимации, а затем переместите маршрут от одного к другому.

angular документ

. код

{
  path: '',
  component: HomeComponent,
  data: { depth: 1 },
  resolve: { items: SomeResolver }
}

и распознаватель

import { Injectable } from '@angular/core';
import { APIService } from './api.service';

import { Resolve } from '@angular/router';

import { ActivatedRouteSnapshot } from '@angular/router';

@Injectable()
export class SomeResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return **your condition**;
  }
}