title: Angular 4 Animation won't trigger on route change
body: <p>I've created the following animation in my Angular 4 project:</p>
  
  <pre><code>import { trigger, state, style, transition, animate } from '@angular/animations';
  
  export function slide() {
      return trigger('slide', [
              transition('void =&gt; *', [
                  style({opacity: 0}),
                  style({transform: 'translateX(100%)'}),
                  animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1}))
              ]),
              transition('* =&gt; void', [
                  style({opacity: 0}),
                  style({transform: 'translateX(100%)'}),
                  animate('1s 2s ease-in-out', style({transform: 'translateX(0%)', opacity: 1}))
              ])
          ])
    }
  </code></pre>
  
  <p>I've attached the animation to my component using the <code>host</code> property of the <code>@Component</code> decorator.</p>
  
  <pre><code>@Component({
    selector: 'test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss'],
    animations: [slide()],
    host: {'[@slide]': '', 'style': 'display: block;'}
  })
  </code></pre>
  
  <p>Now, I'd expect the animation to trigger at two points:
  1. When the component is initialized, a.k.a when I hit the appropriate route
  2. When I leave that route and navigate to another one</p>
  
  <p>The first scenario works flawlessly, however the second one doesn't. What am I missing/doing wrong here?</p>