並行運行多個查詢動畫

Question

我有兩個路由組件和它們的容器，我設置了一個動畫觸發器@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

解決方法：只需在一個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%' }))) ]) 
]) 

信用包裹查詢Ploppy3在GitHub上。

Answer 2

Ploppy3在這裏回答了你：https://github.com/angular/angular/issues/9845#issuecomment-321240191如何在init上爲路由器製作單獨的動畫。 默認情況下兒童動畫是禁用的，所以你只會看到路由器動畫（爲了啓用它，你可以檢查https://angular.io/api/animations/animateChild）。 所以要做你想做的事情，我只需要爲組件添加所需的動畫。 所以你需要像Ploppy3寫的那樣添加routerAnimation，並使用滑動組件。