title: Angular 2/4+ Router animation, wait for previous route animation to complete
body: <p>I have the following animation configured on 2 of my routes.</p>
  
  <pre><code>trigger('routeAnimation', [
          transition(':enter', [
              style({ opacity: 0 }),
              animate('1s', style({ backgroundColor: 1 }))
          ]),
          transition(':leave', [
              style({ backgroundColor: 1 }),
              animate('1s', style({ backgroundColor: 0 }))
          ]),
      ]),
  </code></pre>
  
  <p>They work properly. Both get executed when switching from route A to B. However they execute simultaneously. I would like for the TO route to wait for the FROM route's exit animation to finish before coming in.</p>
  
  <p>I want A to completely fade out before B comes in.</p>
  
  <p>Is that possible? Maybe with lifecycle hooks or something?</p>