각도 애니메이션 : 스타일이없는 페이지 전환`position : absolute`?

Question

목적는 :

• Angular 2 — Animating Router transitions
• Page transition animations with Angular 2.0 router and component interface promises
: 나는 경우 클릭 한 페이지에서 내가 포함, 온라인 솔루션을 많이 시도 다른

---

에 멋진 전환 효과를 추가 할

• ....

한 가지 공통점은 position: absolute 또는 position: fixed과 같은 스타일이 추가되어 내 기존 앱 레이아웃이 손상된다는 것입니다. 내가 각도 1을 사용하는 경우

내가 추가 할 필요가 없습니다, 기억 position: absolute는 각도 2 또는 4에서 가능

<div ui-view><div>에?

Answer 1

떠나는 애니메이션에만 절대 위치 지정을 추가 할 수 있습니다. 유입 경로가 staticly 위치하면서

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%)'})) 
]) 

그래서 만 남겨 경로는 절대적 위치된다.

가 작동하지 않는 경우, 라우터 콘센트 위치 래핑되어 있는지 확인하십시오 : 블록

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

Answer 2

에 대해 이야기 :

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

상대와 경로-구성 요소는 디스플레이를 가지고 각도 버전 4.3.x. routerdocumentation을 읽고, 경로 사이에 애니메이션을 추가하는 방법을 설명합니다. 여기에 게으른 사람들을위한 이력서 (나 자신 포함)가 있습니다.

당신은 @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)' 
     }) 
    ) 
    ]) 
]); 

그런 다음 구성 요소에 구성 요소의 레이아웃 CSS 속성을 지정하기 위해 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 
} 

각 라우팅 구성 요소에 이러한 추가는 번거로울 수 있습니다. 문서가 제안하고 나는 다음을 인용한다.

간단한 구성으로 경로 애니메이션을 적용하는 것은 실제 데모에서는 효과가 있지만 실제 경로에서는 경로를 기반으로하는 것이 좋습니다.

마티아스 Niemelä에서이 문서 https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations