title: How to change states at the end of an animation transition? - Angular 2
body: <p>Hi I'm trying to get my angular 2 app to do router transitions as shown from this tutorial. </p>
  
  <p><a href="https://medium.com/google-developer-experts/angular-2-animate-router-transitions-6de179e00204#.7j6rhlfmz" rel="nofollow noreferrer">Router Transition Tutorial</a></p>
  
  <p><a href="https://embed.plnkr.co/PcRpcGK2duGw0HdaGaF5/?show=preview" rel="nofollow noreferrer">Demo Link</a></p>
  
  <p>I'm really new to animations and am having problems with the state leaving the component styles at <strong>position: fixed</strong> allowing no scrolling. I would like to know how I can change the state to a user defined state at the end of the <strong>:entry</strong> transition.</p>
  
  <pre><code>function slideToRight() {
    return trigger('routerTransition', [
      state('void', style({position:'fixed', width:'100%'}) ),
      state('*', style({position:'fixed', width:'100%'}) ),
      state('visible', style({position:'static', width:'initial'}) ),
      transition(':enter =&gt; visible', [ //&lt;-- my attempt at switching the state
        style({transform: 'translateX(-100%)'}),
        animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})),
      ]),
      transition('visible =&gt; :leave', [ //&lt;-- my attempt at switching the state
        style({transform: 'translateX(0%)'}),
        animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
      ])
    ]);
  }
  </code></pre>