4
私は、基本的なアニメーションの部分が絡まっていると思います。私は、処理するイベントを知る必要があります。理想的には、ナビゲーションレベルで使用できるソリューションがほしいので、すべてのコンポーネントをラップすることができますが、ページの読み込みの簡単な例で十分であり、大変感謝しています。 私が関係しているように、他のいくつかの質問が見つかりましたが、彼らは私の具体的な質問に答えるように見えるか、古くなっていない。ここでロード/アンロード時にページにフェードイン/アウトエフェクトを実装するにはどうすればよいですか？
Angular 2 "slide in animation" of a routed component Page transition animations with Angular 2.0 router and component interface promises
は、私がこれまで持っているものです。
htmlファイル
<article @heroState="componentState">
<p>article element should fade in/out</p>
</article>
成分
@Component({
selector: 'blog-about',
templateUrl: './app/about/about.html',
animations: [
trigger('heroState', [
state('active', style({
backgroundColor: 'blue',
transform: 'scale(1)'
})),
state('inactive', style({
backgroundColor: 'green',
transform: 'scale(1.1)'
})),
transition('active => inactive', animate('1000ms ease-in')),
transition('inactive => active', animate('1000ms ease-out'))
])
]
})
export class About implements OnInit, OnDestroy {
public componentState: string;
public Title: string
constructor() {
this.Title = "this is about";
}
ngOnInit()
{
this.componentState = 'inactive';
}
ngOnDestroy()
{
}
}