Angular анимация маршрутизатора не запрашивает класс - PullRequest
Новая
       9

Angular анимация маршрутизатора не запрашивает класс

1 голос
/ 12 января 2020

Я пытаюсь анимировать 3 класса в моем компоненте, который покинет DOM, когда маршрут меняется. Я использовал настройки из angular do c, например: 

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

В модуле маршрутизатора я передаю данные с ключом анимации в маршрутизатор, чтобы я мог перехватить это с помощью функции transition в моей функции анимации. 

export const routerAnimation = trigger('routeAnimations', [
  transition('Welcome => References', [
    query(
      '.state2',
      [
        style({
          zIndex: 12,
          opacity: 0.5
        }),
        animate('1s')
      ],
      { optional: true }
    )
  ])
]);

Но он идет прямо на страницу ссылок, ничего не делая. Страница приветствия, которую я хотел бы анимировать, получила простой html примерно так: 

<section>
  <div class="state0"></div>
  <div class="state1"></div>
  <div class="state2"></div>
  <div class="state4"></div>
  <div class="state5"></div>
</section>

Различные элементы div, содержащие разные фоновые изображения. Здесь я хотел бы добиться того, чтобы при переходе со страницы приветствия на страницу ссылок сначала показывалось .state1, а после 0,5 с - .state2. Div сложены друг на друга. Таким образом, входя на страницу, вы видите только .state0 div. Мой соответствующий файл s css выглядит так: 

div {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

section{
  position: relative;
  height: 100%;
  width: 100%;
}

.state0 {
  z-index: 9;
  background-image: url("/assets/images/state0.jpg");
}

Но я не могу запросить какой-либо класс и установить для него другой z-индекс. Он работает вручную с помощью инструмента chrome dev, когда я назначаю другой z-index для div, например, .state1. Все сложно, если я установлю переход на Welcome <=> References, сначала я вижу div .state2, а затем он оживляет div .state0. Поэтому я предполагаю, что мне здесь не хватает принципиально важной основы c, но я застрял на несколько недель.

...