2

I am trying to implement Fade transition on my router outlet - whenever you move to a page you get fadein/out.

However it just doesn't seem to work at all, the router outlet is in the main area of the navigation bar: Stackblitz of my app

See "fadeIn.ts" for the animation See "app.nav-component" html/ts and app module for implementation

I would expect when clicking a link in the navigation the animation of transition would trigger.

makat
  • 154
  • 1
  • 3
  • 14

1 Answers1

3

I modified your fadeIn.ts a bit. 

import {
    trigger,
    animate,
    transition,
    style,
    query, group
  } from '@angular/animations';

  export const fadeAnimation = trigger('fadeAnimation', [
    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.3s ease-in-out', style({ transform: 'translateX(0%)' }))

          ], { optional: true }),

          query(':leave', [

           style({ transform: 'translateX(0%)' }),

            animate('0.3s ease-in-out', style({ transform: 'translateX(-100%)' }
          ))], { optional: true }),         

        ])

      ])
  ]);

WORKING DEMO

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Fantastic ! - I will try modifying it to a fade animation instead - could you please let me know what was wrong in my fadeIn.ts file if that was the only problem? – makat Sep 17 '18 at 11:07
  • If anybody is interested, the root cause what the setting "style({ position: - it has to be fixed position – makat Sep 20 '18 at 09:46