Angular преобразование маршрута не работает - PullRequest
Новая
       5

Angular преобразование маршрута не работает

0 голосов
/ 03 февраля 2020

У меня следующий маршрут перехода. Я хочу перевести компонент при изменении маршрута - но почему-то это не получается.

Изначально я нашел код в сети, но вместо преобразования анимировал opacity, который работал нормально, даже в моем случае. Но почему-то с тех пор, как я обменял его на transform, он перестал работать. Как так?

Кстати, изменение маршрута задерживается, я думаю, 1500 мс, но ничего не происходит. 

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

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

export const slideInAnimation =
  trigger('routeAnimations', [
    transition('* <=> *', [
      group([
        query(
          ':enter',
          [
            style({
              transform: 'translateY(100vh)'
            }),
            animate(
              '1500ms',
              style({transform: 'translateY(0)'})
            ),
            animateChild()
          ],
          {optional: true}
        ),
        query(
          ':leave',
          [animate('1500ms', style({transform: 'translateY(-100vh)'})), animateChild()],
          {optional: true}
        )
      ])
    ])
  ]);

Внутри компонентов мой код выглядит так: 

<div class="viewport">
  <div #scrollableContainer class="scrollable-container" [style.transform]="'translate3d(0,' + translateY + 'px,0)'">

   ...

  </div>
</div>

.scrollable-container {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  min-width: 100%;
  justify-content: center;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.viewport {
  z-index: 1;
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
...