Home>

Recently writing a project with angular4 needs to add animation for each route jump.Looking at the official documentation,Although it can be achieved,However, it is troublesome to introduce animations once for each component.I found a lot of information on the Internet,But didn't find a suitable method,Finally I wrote a method as follows:

First import browseranimationsmodule in app.module

import {browseranimationsmodule} from "@ angular/platform-browser/animations";
@ngmodule ({
 imports:[
  browseranimationsmodule

Create an animations.ts in the root directory src/app /. The content is as follows,Here I use query and group because I want to switch back and forth between the two pages.

import {animationentrymetadata, state} from "@ angular/core";
import {trigger, transition, animate, style, query, group} from "\@angular/animations";
export const routeanimation:animationentrymetadata =
 trigger ("routeanimation", [
  transition (":enter", [
   style ({
    position:"absolute"
   }),   animate ("0.5s ease-in-out")
  ]),  transition ("* =>*", [
   query (":leave", style ({transform:"translatex (0)", position:"absolute"}), {optional:true}),   query (":enter", style ({transform:"translatex (100%)", position:"absolute"}), {optional:true}),   group ([
    query (":leave", animate (". 5s ease-in-out", style ({transform:"translatex (-100%)"})), {optional:true}),    query (":enter", animate (". 5s ease-in-out", style ({transform:"translatex (0)"})), {optional:true})
   ])
  ])
 ]);

Then use navigationend in app.component to set the parameter change for each route jump and introduce the animation module

import {router, navigationend} from "@ angular/router";
import {routeanimation} from "./animations";
@component ({
 selector:"app-root", templateurl:"./app.component.html", styleurls:["./app.component.less"], animations:[routeanimation]
})
//required parameters for router jump animation
 routerstate:boolean=true;
 routerstatecode:string="active";
this.router.events.subscribe (event =>{
   if (event instanceof navigationend) {
    //Change status every time route is redirected
   this.routerstate =! this.routerstate;
   this.routerstatecode=this.routerstate?"active":"inactive";
   }
  });

Finally, declare the routing animation in app.component.html.

<div [@routeanimation]="routerstatecode">
 <router-outlet></router-outlet>
</div>

Now global route jumps are all animated,Don't import animations one by one.

  • Previous Android uses RadioGroup to implement bottom navigation bar
  • Next Java-File File Simple and Practical Method (Share)