You are currently trying to implement some animations on my Angular2 site using ng2 built into the animations component. So far I have been working with the Angular 2 Developer Guide - Animations presented in the documentation. With this, although I came across a few questions, I was hoping the SO community could help. My first question / problem that I seem to encounter is that the animation (from what I can say) the page loading does not work. It seems to work just fine if I switch to the view and then back to the view with animation. This is the code I'm currently using for the animation in question (I can provide the entire 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 got the impression that void => * set my DOM element to opacity:0 and after it enters in into the view, it will be opacity:1 . Another issue that I seem to be facing is that my navigation systems do not seem to work on mobile devices. I actually didn’t move them to my server, but, developing locally and browsing my mobile device through node localtunnel , there seems to be no animations. This may be because the weird localtunnel method works, so I'm not too terribly concerned about it until I can really test it on a real server. Here's another animation, in particular when I noticed that it doesn't work 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 of the last issues I ran into is a known issue with the Angular2 command - it is animating when the look of the router changes. There is currently a SO question that addresses this and Angular2's repo ticket (mentioned in Gunter Zochbauer's comment on the SO question). With that, I was curious if there were any real workarounds? Through a little research, it seemed that at one point ng-enter and ng-leave could be implemented, which could be used in their css for this, but from what I can say, they were gradually phased out. Still a little more research needs to be done so that I can be wrong.
Thanks in advance for your help!
UPDATE (7.7.16): Okay, so I decided to go back to it, and messing around with the page loading animation time, it seems to work. Although I need to make roughly an animation of 1000ms so that it can be noticed. This leads me to questions (or more thoughts) that I think start to run animations before the DOM fully loads. It would seem a little strange. Still working on a mobile animation situation. Looking as if I'm asking a question about the Github repository right now, as I messed it up with an honest bit and can't make it work. Also, there seems to be no mention of mobile animation not working for NG2.
UPDATE (7.13.16): Looks like the Angular2 team made a few fixes released with RC5 that should solve my problems. I'm going to answer my own question and close.