CODEWITHSUNDEEP
angularanimation
spstrademark
spstrademark

Reputation: 475

Angular execute animation in child component element after animation in app.component

Greetings fellow developers,

in my app.component.html i have the following code

 <div class="card m-3" [@routeAnimations]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </div>

animation code

export const routerTransition = trigger('routeAnimations', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%'})
    , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.6s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.6s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

Inside the <router-outlet> </router-outlet> among other elements is the following div

<div class="flex-container" [@fadeInOut] >
<!-- some content -->
</div>

with animation

export const fadeInOut =

  trigger('fadeInOut', [
    state('in', style({ opacity: 1, transform: 'translateY(0)' })),
    transition('void => *', [
      style({ opacity: 0, transform: 'translateY(100%)' }),
      animate(1500)
    ]),
    transition('* => void', [
      animate(1500, style({ opacity: 0, transform: 'translateY(100%)' }))
    ])
  ])

How can i execute the fadeInOut animation after the router-outlet has loaded with the routerTransition animation executed? I have tried to provide only the code that is related to specified issue. Best regards!

Upvotes: 0

Views: 53

Answers (1)

spstrademark
spstrademark

Reputation: 475

So i have managed to achieve this this with the following code : app.component.html

<div class="card m-3" [@routeAnimations]="getState(o)"
         (@routeAnimations.start)="start$.next($event)"
         (@routeAnimations.done)="done$.next($event)">
         <router-outlet #o="outlet"></router-outlet>
</div>

app.component.ts

  public start$: Subject<AnimationEvent> = new Subject();
  public done$: Subject<AnimationEvent> = new Subject();

component.ts

  ShowDevices: boolean;

  constructor(
    app: AppComponent
  ) {

    app.done$.pipe().subscribe(result => {
      // do special work here
      this.ShowDevices = true;
    });

component.html

  <div [@fadeInOut] *ngIf="ShowDevices">
<!-- Some content -->

  </div>

Hope it helps someone!

Upvotes: 1

Related Questions