CODEWITHSUNDEEP
angularanimationtransitionrouter
Adrianwritenow
Adrianwritenow

Reputation: 63

Angular 6 router transition

Currently having a odd issue with setting up a router transition I can't seem to understand, currently on angular 6

appComponent.html file:

<navigation-component></navigation-component>
<loading-screen [@fadeAnimation]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</loading-screen>
<footer-component></footer-component>

loadingScreenAnim.ts file:

export const loading_screen_anim =
  trigger('fadeAnimation', [
    transition('* <=> *', [
      query(':enter, :leave',
        [
           style({opacity: 0, position: 'fixed', width: '100vw', background:'#ffff', height: '100vh', 'z-index' : 10}),
        ],
      ),
        query(':enter',[
            animate('300ms ease',
            style({
                opacity:1,
            })
            )
        ])      
    ])
  ]);

appComponent.ts file:

@Component({
  selector: 'root',
  template:require('./app.component.html'),
  animations: [loading_screen_anim],
})
export class AppComponent {
  title = 'pogo-ng6';
  pagecontent:any;

  constructor(){
  }


  public prepareRoute(routerOutlet: RouterOutlet) {
    const routeData = routerOutlet.activatedRouteData['animation'];
    return routeData ? routeData : 'rootPage';

  }

}

and relative css:

/deep/ router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

Is there something that I'm not understanding on why the animation isn't firing off currently, also I've found solutions however it interferes with my footer.

Upvotes: 0

Views: 171

Answers (1)

DevReboot
DevReboot

Reputation: 161

I tried making a change in your stackblitz on the routeroutlet in the HTML as follows and your fadeAnimation works:

<main [@fadeAnimation]="routerOutlet.isActivated ? routerOutlet.activatedRoute : ''">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</main>

When route is activated, it triggers the animation. This code in app.component.ts is not necessary when using this technique:

  //  public prepareRoute(routerOutlet: RouterOutlet) {
  //   const routeData = routerOutlet.activatedRouteData['animation'];
  //   return routeData ? routeData : 'rootPage';

Upvotes: 2

Related Questions