title: Angular 4 Animation onload?
body: <p>So when a user visits an album page, I'd like for the album photo to slide to the right as the page is loading. How would I go about that ? Here is the animation:</p>
  
  <pre><code>  animations: [
      trigger('slide-in',[
        state('out', style({
          transform: 'translateX(-400px)',
          opacity: "0"
        })),
        state('in', style({
          transform: 'translateX(0px)',
        })),
        transition('out =&gt; in',
          animate('1000ms ease-in', keyframes([
            style({ opacity: 0, offset: 0}),
            style({ opacity: 0.5, offset: 0.5}),
            style({ opacity: 1, offset: 1}),
          ]))),
      ])
    ]
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>  &lt;img [@slide-in]='state' src="{{albumToDisplay.albumCover}}" style="float: left;"/&gt;
  </code></pre>
  
  <p>Then I have a variable to keep it's state:</p>
  
  <pre><code>state: string = 'out';
  </code></pre>
  
  <p>My solution that is failing is this (In the component.ts):</p>
  
  <pre><code>ngOnInit {
  this.state = 'in';
  }
  </code></pre>