Angular Анимация: переход страницы без стиля `position: absolute`?

Цель. Я хочу добавить хороший эффект перехода при нажатии одной страницы на другую.

Я попробовал много решений в Интернете, в том числе:

одна вещь заключается в том, что все они имеют стиль, например position: absolute или position: fixed, что нарушает мой существующий макет приложения.

Помню, когда я использую Angular 1, нет необходимости добавлять position: absolute в <div ui-view><div>

Возможно ли это в Angular 2 или 4?

Ответ 1

Говоря о Angular версии 4.3.x. Читая документацию router , они объясняют, как добавить анимацию между маршрутами. Вот резюме для ленивых (включая меня).

Вы хотите импортировать библиотеки анимации из @angular/core (а не @angular/animations):

import {
  AnimationEntryMetadata,
  animate,
  state,
  style,
  trigger
} from '@angular/core';

export const fadeInAnimation: AnimationEntryMetadata = trigger('fadeInAnimation', [
  transition(':enter', [
    style({
      opacity: 0,
      transform: 'translateY(20px)'
    }),
    animate(
      '.3s',
      style({
        opacity: 1,
        transform: 'translateY(0)'
      })
    )
  ])
]);

Затем в вашем компоненте используйте декоратор HostBinding, чтобы указать свойства компоновки компоновки компоновки (вам не нужно использовать позицию fixed или absolute):

import { Component, OnInit, HostBinding } from '@angular/core';

import { fadeInAnimation } from './../animations/fadein';

@Component({
  animations: [fadeInAnimation],
  selector: 'app-posts',
  templateUrl: './posts.component.html'
})
export class DemandsComponent implements OnInit {
  @HostBinding('@fadeInAnimation') fadeInAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'relative';

  // Rest of the code
}

Добавление этого к каждому маршрутизируемому компоненту может быть громоздким. Документация предлагает, и я цитирую:

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

Эта статья Матиаса Нимеля может помочь https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations

Ответ 2

Вы можете добавить абсолютное позиционирование исключительно к покидающей анимации.

transition(':enter', [          
    style({transform: 'translateX(100%)'}),    
    animate('0.3s ease-in-out', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [          
    style({transform: 'translateX(0%)', position: 'absolute', left: 0, right: 0, top: 0}),    
    animate('0.3s ease-in-out', style({transform: 'translateX(-100%)'}))
])

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

Если это не сработает, убедитесь, что ваш роутер-розетка завернута положением: relative

<div style="position: relative;">
  <router-outlet></router-outlet>
</div>

И что ваши компоненты маршрута имеют отображение: block

@Component({
  styles:[':host {display: block;}']