Animate routes based on route paths in angular (v2+)

Question

Instead of attaching an animation to every component that is being routed to such as in this StackOverflow answer, or as in the first part of the official documentation. An example:

In hero-detail.component.ts:

import { Component, OnInit } from '@angular/core';
import { fadeInOutAnimation } from "app/app-routing.animation";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    fadeInOutAnimation(300)
  ]
})
export class HomeComponent{       

}

In app-routing.animation.ts:

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

export const fadeInOutAnimation = function (fadeInTimeMS) {
  return trigger('fadeInOut', [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({ opacity: 0 }),
      animate(fadeInTimeMS, style({ opacity: 1 }))
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(fadeInTimeMS, style({ opacity: 0 }))
    ])
  ])
}

I want to animate routes based on route paths:

Applying route animations to individual components works for a simple demo, but in a real life app, it is better to animate routes based on route paths.

as stated at the end of the 'Adding animations to the routed component' in the angular documentation. It doesn't expand on how to do this though.

There is an example with Angular v4 here: https://github.com/matsko/ng4-animations-preview/blob/master/src/app/app.component.ts — DeborahK, Apr 08 '17 at 06:07
Their guide is full of questionable advice and statements like that. It is changing so fast that you can find contradictory information a few lines from each other. It would be nice if there were some info on animating routes based on route paths. Perhaps in the "animations" section or in the "routing" section. — None, Apr 19 '17 at 15:08

Lasithe · Answer 1 · 2018-07-13T09:24:27.273

Here's an animation where you can see the view sliding left to right when you're going forward and right to left when you're going backward without adding the animation to components separately.

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

const leftToRight: AnimationMetadata[] = [
    /* 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.5s ease-in-out', style({transform: 'translateX(0%)'}))
        ], {optional: true}),
        query(':leave', [
            style({transform: 'translateX(0%)'}),
            animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
        ], {optional: true}),
    ])
];
const rightToLeft: AnimationMetadata[] = [
    /* 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.5s ease-in-out', style({transform: 'translateX(0%)'}))
        ], {optional: true}),
        query(':leave', [
            style({transform: 'translateX(0%)'}),
            animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
        ], {optional: true}),
    ])
];

export const routerTransition = trigger('routerTransition', [
    transition('first_page => second_page', leftToRight),
    transition('second_page => first_page ', rightToLeft),
    transition('second_page => third_page', leftToRight),
    transition('third_page => second_page', rightToLeft),
]);

And import it in your AppComponent and add a function to return the route state. Don't forget the styles I have applied.

import {routerTransition} from "./router.animations";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [`
        /deep/ router-outlet ~ * {
            position: absolute;
            width: 100%;
        }
    `],
    animations: [routerTransition]
})
export class AppComponent implements {
    getState(outlet) {
        return outlet.activatedRouteData.state;
    }

    onDeactivate() {
        // document.body.scrollTop = 0;
        // Alternatively, you can scroll to top by using this other call:
        window.scrollTo(0, 0);
    }
}

Apply it to main tag as a directive

<main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet" (deactivate)="onDeactivate()"></router-outlet>
</main>

score 0 · Answer 2 · answered Apr 25 '18 at 19:09

Here's an example of changing transitions based on paths:

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

const fade: any = [
    transition(':enter', [   // :enter is alias to 'void => *'
      style({ opacity: 0 }),
      animate(fadeInTimeMS, style({ opacity: 1 }))
    ]),
    transition(':leave', [   // :leave is alias to '* => void'
      animate(fadeInTimeMS, style({ opacity: 0 }))
    ])
];
const transition2: any = [
    //other transition
];

export const routerTransition = trigger('routerTransition', [
    transition('path1 => *', fade),
    transition('path2 => path3', fade),
    transition('path3 => path1', transition2),
    transition('* => path2', transition2),
]);

Then in components use the animation:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    routerTransition
  ]
})

Animate routes based on route paths in angular (v2+)

2 Answers2