title: Angular2 Animation on Load and Page Transition
body: <p>Currently trying to implement some animations into my Angular2 site using ng2's built in <code>animations</code> component. So far I've been working through the Angular 2 <code>Developer Guide - Animations</code> provided in the documentation. With that though I've run into a few questions I was hoping the SO community might be able to assist in. My first question/problem I seem to be having is that the animation (from what I can tell) doesn't run on page load. It seems to run perfectly fine if I switch to a view then back to the view with the animation. This is the code I'm currently using for the animation in question (I can provide the whole component if desired):</p>
  
  <pre><code>animations: [
    trigger('kissState', [
      state('in', style({opacity: 1})),
      transition('void =&gt; *', [
        style({opacity: 0}),
        animate('250ms ease-in-out')
      ]),
      transition('* =&gt; void', [
        animate('250ms ease-in-out', style({opacity: 0}))
      ])
    ])
  ]
  </code></pre>
  
  <p>I was under the impression that the <code>void =&gt; *</code> would set my DOM element to <code>opacity:0</code> and once it entered <code>in</code> to the view it would be <code>opacity:1</code>. Another problem I seem to be having is that my navigations don't seem to be working on mobile. I haven't actually moved them to my server yet but developing locally and looking on my mobile device via node <code>localtunnel</code> there doesn't seem to be any animations. This could be because the strange way <code>localtunnel</code> operates so I'm not too terribly concerned about that until I can truly test it on an actual server. Here's the other animation that in particular is when I noticed it wasn't working on my mobile device: </p>
  
  <pre><code>animations: [
    trigger('offScreenMenu', [
      state('inactive', style({
        opacity: 0,
        zIndex: -10
      })),
      state('active',   style({
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        zIndex: 10
        })),
      transition('inactive =&gt; active', animate('250ms ease-in')),
      transition('active =&gt; inactive', animate('250ms ease-out'))
    ])
  ]
  </code></pre>
  
  <p>One last problem I've been having which is a known issue by the Angular2 team is animations on router view change. There's currently a SO <a href="https://stackoverflow.com/questions/37904860/angular-2-animate-no-visible-effect-of-the-void-transition-when-changin">question</a> that addresses this and a ticket on the Angular2 repo (mentioned in the comment by Günter Zöchbauer in the SO question). With that, I was curious if there were any present workarounds? Through some brief research it looked like there may at one time have been implemented a <code>ng-enter</code> and <code>ng-leave</code> one could use within their css for this, but from what I can tell these have been phased out. Still need to do a little more research so I could be wrong about that. </p>
  
  <p>Thanks in advance for any help!</p>
  
  <p>UPDATE(7.7.16): Alright so I decided to come back around to it and after messing with the timing of the page load animation it does appear to be working. Though I have to do a roughly a <code>1000ms</code> animation for it to be noticed. Which brings me to the questions (or more thought) that I believe the animation starts to execute before the DOM has fully loaded. Which would seem a bit strange.
  Still working on the mobile animation situation. Looking like I'll be filing an issue on the Github repo at the moment as I've messed with it a fair bit and can't seem to get it to work. Also there doesn't seem to be any mention of mobile animations not working for NG2.</p>
  
  <p>UPDATE(7.13.16): Looks like the Angular2 team has made a few fixes slated to release with RC5 that should address my above concerns. Going to answer my own question and close.</p>