角度4のアドバンストランジション/アニメーションを実装できますか？

Question

私は角4でアニメーションを実装する必要があります。以下は実装したいサンプルの先進アニメーションです。試してみましたが、私はangular4で並列divアニメーションを書くことができませんでした。並列divアニメーションでは、これはCSSを介して達成することもできるので、私はangular4も信じています。だから誰かがどのようにヒントやコードを提供してください書くか知っている場合。

注：例のようにルータの移行に含める必要があります。

Animation Sample

Answer 1

これを行う方法は、ときに、コンポーネントのロードアニメーションをトリガする遷移別名:enterを使用し、その後、あなたはアニメーションの状態を使用することができ、あなたがリンクをクリックしたときに、あなたはトグルでありますアニメーションがトリガーされ、アニメーションが完了すると、最終的には、必要なページに移動することができます。

アニメーションが完了したら、何かを行うには、テンプレートの(@animation.done)="onDone(event)"を使用します。

2つの<div>をページの上部に、もう1つを下部に使用しました。アニメーションがトリガーされると、その高さは0pxからウィンドウの半分（50vh）になります。

Here is a StackBlitz example I made for this.

component.html

<div [@extend]="state" (@extend.done)="onDone(event)" class="animation-div div-top"></div> 

<div class="main-div"> 
    <a (click)="goTo()">Link 1</a> 
    <!-- page content --> 
</div> 
<div [@extend]="state" class="animation-div div-bottom"></div> 

component.ts

import { Component, OnInit } from '@angular/core'; 
import { extend } from '../animations'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html', 
    animations: [extend], 
    styleUrls: ['../app.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    state = 'out'; 
    constructor(private router: Router) { } 

    ngOnInit() { 
    this.state = 'out'; 
    } 

    onDone($event) { 
    if (this.state === 'in') { 
     this.router.navigate(['shop']); 
    } 
    } 

    goTo() { 
    this.state = 'in'; 
    } 
} 

animations.ts

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

export const transitionTime = '1.5s'; 

export const extend = 
    trigger('extend', [ 
    state('in', style({ height: '50vh' })), 
    state('out', style({ height: '0px' })), 
    transition(':enter', [ 
     style({ 
     height: '50vh' 
     }), 
     animate(transitionTime, style({ 
     height: '0px' 
     })) 
    ]), 
    transition('* => *', [ 
     animate(transitionTime) 
    ]) 
    ]); 

component.css

.animation-div { 
    height: 0px; 
    background-color: gray; 
    width: 100%; 
} 

.div-top { 
    position: absolute; 
    top: 0px; 
} 
.div-bottom { 
    position: absolute; 
    bottom: 0px; 
} 

.main-div { 
    position: absolute; 
    top: 50px; 
    z-index: -1; 
}