複数のクエリアニメーションを並行して実行する

Question

私は2つのルーティングされたコンポーネントとそのコンテナにアニメーショントリガーを設定しています。@slideここで私はそれに応じてクエリを実行し、それに応じてアニメートします。

<div [@slide]="o.activatedRouteData.name"> 
    <router-outlet #o="outlet"></router-outlet> 
<div> 

RouterModule.forRoot([ 
    { path: '',  component: HomeComponent, data: { name: 'home' } }, 
    { path: 'login', component: LoginComponent, data: { name: 'login' } } ]) 

trigger('slide', [ 
    transition('login => home', [ 
    query('home', style({ left: '-120%', right: '120%' })), 
    query('login', style({ left: '0', right: '0' })), 

    query('home', animate(duration, style({ left: '0', right: '0' }))), 
    query('login', animate(duration, style({ left: '120%', right: '-120%' }))) 
]) 

何私が探していることは持っている方法ですがこれは、第二のアニメーションは、焼成前に完了するために最初のを待っていることを除いて、動作しますそれらは並行して発火する。思考？

Answer 1

ソリューション：単純にGitHubの上でオーバーPloppy3するgroup()

trigger('slide', [ 
    transition('login => home', [ 
    query('home', style({ left: '-120%', right: '120%' })), 
    query('login', style({ left: '0', right: '0' })), 

    group([ query('home', animate(duration, style({ left: '0', right: '0' }))), 
      query('login', animate(duration, style({ left: '120%', right: '-120%' }))) ]) 
]) 

クレジットでクエリをラップします。

Answer 2

Ploppy3があなたに答えました：https://github.com/angular/angular/issues/9845#issuecomment-321240191 initのルータのための別のアニメーションを作る方法。 子アニメーションはデフォルトで無効になっているため、ルータアニメーションだけが表示されます（有効にするには、https://angular.io/api/animations/animateChildをチェックしてください）。 あなたが望むことをするには、コンポーネントに必要なアニメーションを追加するだけです。 したがって、Ploppy3が書いたようにrouterAnimationを追加し、コンポーネント用にslideを使用する必要があります。