Angular 7 Router анимация с несколькими выходами маршрутизатора

Question

Я пытаюсь добавить переход между маршрутами, следуя этой статье и нескольким, как это.

Я действительно могу заставить его работать, но у меня возникают проблемы с использованием абсолютного позиционного CSS-кода, который, кажется, требует:

router-outlet ~ * {
 position: absolute;
 width: 100%;
 height: 100%;
}

Мое приложение имеет несколько точек маршрута: верхний колонтитул, главный и нижний колонтитулы. Я использую flexbox в корне приложения, чтобы верхний и нижний колонтитулы придерживались сверху и снизу.

Вы можете увидеть макет и переход, работающие в этом стеке.

Проблема заключается в том, что установка абсолютного значения и 100% приводит к тому, что содержимое попадает в нижний колонтитул (см. Страницу "О программе").

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

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

Answer 1

Дать display: block попытка:

main router-outlet.maincontent ~ * {
  display: block;  
  width: 100%;
  height: 100%;
}

Я пытаюсь найти недостаток в использовании этого (или не использования position: absolute), но все выглядит так, как вы ожидаете -> https://stackblitz.com/edit/crossfade-test-eepena?file=src/styles.css

Идея из Angular 4 анимации для постепенного появления и исчезновения вида