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 ({

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 ({
   }),   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
this.router.events.subscribe (event =>{
   if (event instanceof navigationend) {
    //Change status every time route is redirected
   this.routerstate =! this.routerstate;

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

<div [@routeanimation]="routerstatecode">

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)