title: Angular 5 animation specific transitions
body: <p>So my problem is I want to specify a specific animation between to pages.</p>
  
  <p>I want to do one sort of animation when I click on a button which navigate to a specific URL(I am on page1 and navigate to page2) <em>http://localhost:4200/page2</em>. Then if I am on page1 and want to do goBack() I want a different animation when I return on the home page <em>http://localhost:4200</em>.</p>
  
  <p>But with the :leave option of transition I can't achieve my goal, because I will have just one type of animation.
  My idea is to do something like that: </p>
  
  <pre><code>trigger('zoomAndFade', [
    transition( 'page1=&gt; page2', [
      query('.content', [
        style({fontSize: '1em', opacity: 1}),
        animate('2s ease-in-out', style({fontSize: '1.5em', opacity: 0}))
      ])
    ])
  
  trigger('fade', [
    transition( 'page2=&gt;page1', [
      query('.content', [
        style({opacity: 1}),
        animate('2s ease-in-out', style({opacity: 0}))
      ])
    ])
  </code></pre>
  
  <p>but how can I specify the state of a page to the animation ?</p>