角度アニメーション：スタイルなしのページ遷移 `position：absolute`？

Question

目的：

• Angular 2 — Animating Router transitions
• Page transition animations with Angular 2.0 router and component interface promises
：1ページから別の

---

へのクリックは、私を含む、オンラインソリューションの多くをしようとしたとき、私は素敵なトランジションエフェクトを追加します

• ....

よくあることは、それらのすべてがposition: absoluteまたはposition: fixedのようなスタイルを持っていることです。これは私の既存のアプリケーションレイアウトを壊します。私は角度1を使用した場合、position: absolute

<div ui-view><div>を追加する必要はありません覚えて

は、それは角度2または4で可能ですか？

Answer 1

離散アニメーションだけに絶対位置を追加できます。

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