Angular2 Animation on Load and Page Transition

Question

Currently trying to implement some animations into my Angular2 site using ng2's built in animations component. So far I've been working through the Angular 2 Developer Guide - Animations 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):

animations: [
  trigger('kissState', [
    state('in', style({opacity: 1})),
    transition('void => *', [
      style({opacity: 0}),
      animate('250ms ease-in-out')
    ]),
    transition('* => void', [
      animate('250ms ease-in-out', style({opacity: 0}))
    ])
  ])
]

I was under the impression that the void => * would set my DOM element to opacity:0 and once it entered in to the view it would be opacity:1. 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 localtunnel there doesn't seem to be any animations. This could be because the strange way localtunnel 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:

animations: [
  trigger('offScreenMenu', [
    state('inactive', style({
      opacity: 0,
      zIndex: -10
    })),
    state('active',   style({
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      zIndex: 10
      })),
    transition('inactive => active', animate('250ms ease-in')),
    transition('active => inactive', animate('250ms ease-out'))
  ])
]

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 question 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 ng-enter and ng-leave 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.

Thanks in advance for any help!

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 1000ms 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.

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.

Answer 1

Going to close this question. Most of the issues I mentioned above look like they have been resolved in RC5 of Angular2. Looks like it'll be the waiting game until then. Here's the links to the respective issues/PRs in the Angular repo:

My hunch that elements were animating before page load was correct and has been resolved in this PR: https://github.com/angular/angular/pull/9887

RC5 will contain a fix to allow animations on route change via this PR: https://github.com/angular/angular/pull/9933 and NG2 will eventually allow a query() function for animations which will be great (more can be found here in that regard).

As for the mobile issue. I'm still trying to figure out the a way of recreating the bug on a mobile device (i.e. - in plunker) but have been unsuccessful so far. Not a breaking issue for my website though so I'll be moving forward for now.