5角度（CSS）

Question

ルーティング中にアニメーションをフェードI 2つの経路を有する：

export const appRoutes: Route[] = [ 
{ 
       path: 'page1', 
       component: Page1Component, 
       data: { 
        animation: 'page1' 
       } 
      }, 
{ 
       path: 'page2', 
       component: Page2Component, 
       data: { 
        animation: 'page2' 
       } 
      }, 
]; 

マイルートアニメーション：

export const routeStateTrigger = trigger('routeState', [ 
    transition('* => *', [ 
     query(':enter', [ 
      style({ position: 'absolute', opacity: 0 }) 
     ], { optional: true }), 
     query(':leave', [ 
      animate(300, style({ opacity: 0 })) 
     ], { optional: true }), 
     query(':enter', [ 
      style({ position: 'relative', opacity: 0 }), 
      animate(300, style({ display: 'visible', opacity: 1 })) 
     ], { optional: true }) 
    ]) 
]); 

マイルータ出口：

<div [@routeState]="getAnimationData(routerOutlet)"> 
    <router-outlet #routerOutlet="outlet"></router-outlet> 
</div> 

とgetAnimationData方法：

getAnimationData(routerOutlet: RouterOutlet) { 
    const routeData = routerOutlet.activatedRouteData['animation']; 
    return routeData ? routeData : 'rootPage'; 
} 

0123これは、ページ遷移を除いて、うまく機能

は二段階で（シーケンシャル）が発生します

1. ページ1は（300ミリ秒）
2. AND THEN PAGE2が表示されます（300ミリ秒）

は、私が欲しいものを消えますpage1の消滅はpage2と同じタイミングで起こるはずですが、同時に遷移が起こるはずです。

問題：

私はページ1またはPAGE2のコンテンツのTEMPORARY RESIZINGを防ぎたいです。

説明：

それらが同時に表示され、消えるようにグループ（）でアニメーション、コンテンツが100％の幅であるため（「絶対」、コンテンツのサイズ変更に一時的に位置を設定し、そしてコンテナーのサイズも変更されます）。

Iは、zインデックスで遊んで試してみた：

position: 'relative', 'z-index': 1 

それは、それはまだページを残すの下に入ってくるページを積み重ねています動作しませんでした。

良い解決策がありますか？

Answer 1

私は最終的にそれがうまく行わ：

export const routeStateTrigger = trigger('routeState', [ 
    transition('* => *', [ 
     query(':enter', [ 
       style({ opacity: 0 }) 
      ], { optional: true } 
     ), 
     group([ 
      query(':leave', [ 
        animate(300, style({ opacity: 0 })) 
       ], 
       { optional: true } 
      ), 
      query(':enter', [ 
        style({ opacity: 0 }), 
        animate(300, style({ opacity: 1 })) 
       ], 
       { optional: true } 
      ) 
     ]) 
    ]) 
]); 

このCSSセレクタがトリックでした：入り込みコンポーネントが徐々に0.4秒をwithing

/deep/ router-outlet~* { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

Answer 2

この簡単な移行を試してください。

export const routeStateTrigger = 
    // trigger name for attaching this animation to an element using the [@triggerName] syntax 
    trigger('routeState', [ 

    // route 'enter and leave (<=>)' transition 
    transition('*<=>*', [ 

     // css styles at start of transition 
     style({ opacity: 0 }), 

     // animation and styles at end of transition 
     animate('0.4s', style({ opacity: 1 })) 
    ]), 
    ]);