How to use it to animate router-outlet component enter ?

[mkoczorowski]

Hi there, I need some help If you can please, I'm trying to add animation to component enter via router outlet. I have compiled the 'prefx' file. Added it to 'animations' to the compoenent decorator. Do I specify the animation via host like so ? in AOT I can use any API's right ?

[AckerApple]

You do not need to use the host attribute, as far as I know. Everything you got looks correct, minus I've never used the host attribute.

What matters is what element in your profile.component.html is using @500 such as:

<div *ngIf="show" [@500]="'fadeInUp'">toggled content</div>
<button (click)="show=!show">toggle</button>

[mkoczorowski]

the above example is with ngif. This is, I assume somewhere inside html template of a component. In case of however the component gets created and injected by angular router. There is no way to add [@500] attribute

[AckerApple]

I believe, to do what you are asking, we are awaiting for Angular animations to advance as seen here:

https://github.com/angular/angular/pull/15574#pullrequestreview-37347907

The way I am doing it, to animate routes, is I use a serious of *ngIf elements that react to the current route name, as seen here:

https://github.com/AckerApple/ack-angular/blob/src/example/src/pugs/ack-app-stage.pug

I am using my mentioned technique, here (uses hash tag routing on purpose):

https://ackerapple.github.io/ack-angular/

Good luck, do let me know if you can get done what you are after. I'd be happy to document your findings.

[applecod]

Angular 4.2.4 now supports everything we need to do what you are asking for.

I just updated ack-angular-fx to utilize the new stagger, query, and animateChild definitions

Check out the new staggering : https://www.npmjs.com/package/ack-angular-fx#stagger

The example page has been updated : https://ackerapple.github.io/ack-angular-fx/

And, I need router animations myself. So coming soon I will find out how those work and implement within 2 weeks max I bet.

[AckerApple]

I have now updated ack-angular-fx to support router-outlet animations.

Documentation and so much more have now been provided.

Try it. Reopen issue if you have any troubles.

This package does not use @host for router-outlet animations. Follow new documentation and example page

[ntrpnr]

@AckerApple I've been struggling with this for a couple of hours now.

Can you give me a hint on how to use router-outlet animations?

[AckerApple]

Look at the demo code for Swapping. The whole demo page works on router-outlet animations.

I need to make demo example code for this, bottom line and I thought I did

Essentially you need to wrap the router-outlet with an element that has @fadeInUpKids=“stateVariable”

Ah shit, let me just go build this example for you. It’s easy once you know

[AckerApple]

Here is the knowledge you seek: https://ackerapple.github.io/ack-angular-fx/#/router-outlet

Please ensure you get version 2.1.1 as I found the smallest of issues when making this example code for you

[ntrpnr]

@AckerApple Thank you so much for the examples. Will try it now.

It seems like your push failed... 2.1.1 is not available.

[ntrpnr]

Also, I think you forgot some square brackets and put in some extra double quotes in your example code...

[AckerApple]

Thanks, the next update will have that corrected.

Did you get your router-outlet animating?

[ntrpnr]

I think so :) I'm using remote desktop so it's not that smooth atm... Will deploy to our dev environment soon. :)

<div [@fadeInUpKids]="{value:routerOutlet.activated ? routerOutlet.activatedRoute.toString() : null, params:{time:'500ms'}}"
       [@absoluteKids]="{value:fxId, params:{time:'500ms', position:'fixed'}}">
    <router-outlet #routerOutlet="outlet"></router-outlet>
  </div>

[AckerApple]

fyi, I don't use postion:'fixed' as I find absolute works better far more universally.

I see Ionic and several others use fixed so do what works for you.

omit and do not enter a position for absolute as default is absolute pos (+width:100%)

[AckerApple]

For extra extra info, during absoluteKids, you can see what is applied here: https://github.com/AckerApple/ack-angular-fx/blob/master/src/animations/absolutes.ts#L23

[ntrpnr]

Alright.

I don't think it's working for me. I'm trying the simple example, but with slideInRightKids. It jumps a little bit, but it does not slide in...

<div [@slideInRightKids]="routerOutlet.activated ? routerOutlet.activatedRoute.toString() : null">
    <router-outlet #routerOutlet="outlet"></router-outlet>
  </div>

What would be the correct syntax to specify animation duration for this example? Maybe it's the RDP session that cannot keep up with the 200 ms animation...

[AckerApple]

Your last comment has no ‘@absoluteKids’ definition so of course it’s gonna jump around. Position absolute allows smooth transition because both the :enter element and the :leave element share the same space.

I can’t go documentin it all. You gotta use what’s in the example

[AckerApple]

And it helps to dig threw the code. The example page, it’s router-outlet is compiled from this bit of code which is written in Pug: https://github.com/AckerApple/ack-angular-fx/blob/master/example/src/app.pug#L42

[AckerApple]

You also need the css position relative declaration as seen in example to contain the animations within an area. I’ve almost never seen when you don’t need the combo of position relative wrapping a positioned absolute element.

[ntrpnr]

@AckerApple Fyi, 2.1.1 is still not available on npm.

[AckerApple]

Dang how does that keep happening? I know I deployed. I will have it up within 4 hours.

It’s a minor fix to fix-tracker and a rather small fix