title: Angular 5: fade animation during routing (CSS)
body: <p>I have 2 routes :</p>
  
  <pre><code>export const appRoutes: Route[] = [
  {
                  path: 'page1',
                  component: Page1Component,
                  data: {
                      animation: 'page1'
                  }
              },
  {
                  path: 'page2',
                  component: Page2Component,
                  data: {
                      animation: 'page2'
                  }
              },
  ];
  </code></pre>
  
  <p>My Route animation :</p>
  
  <pre><code>export const routeStateTrigger = trigger('routeState', [
      transition('* =&gt; *', [
          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 })
      ])
  ]);
  </code></pre>
  
  <p>My router-outlet :</p>
  
  <pre><code>&lt;div [@routeState]="getAnimationData(routerOutlet)"&gt;
      &lt;router-outlet #routerOutlet="outlet"&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and getAnimationData method :</p>
  
  <pre><code>getAnimationData(routerOutlet: RouterOutlet) {
      const routeData = routerOutlet.activatedRouteData['animation'];
      return routeData ? routeData : 'rootPage';
  }
  </code></pre>
  
  <p>This works well, except page transition occurs in two steps (sequential) :</p>
  
  <ol>
  <li>page1 disappears (300 ms)</li>
  <li>AND THEN page2 appears (300 ms)</li>
  </ol>
  
  <p>What I want is the disappearing of page1 should happen the same time page2 appears, the transitions should occur simultaneously.</p>
  
  <p><strong>Problem :</strong></p>
  
  <p>I want to prevent the TEMPORARY RESIZING of the content of page1 or page2.</p>
  
  <p><strong>Explanation :</strong></p>
  
  <p>When animating with group() to make them appear-disappear simultaneously AND setting the position temporarily to 'absolute' then the content resizes (because the content is width 100%, and when the container size changes the content changes as well).</p>
  
  <p>I've tried playing with z-index :</p>
  
  <pre><code>position: 'relative', 'z-index': 1
  </code></pre>
  
  <p>but that didn't work, it's still stacking entering page below leaving page.</p>
  
  <p>Is there a good solution to this ?</p>