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

Question

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

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

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

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

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

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

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

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

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

Идея от Угловая анимация 4 для постепенного увеличения и уменьшения изображения