Chapter 6: Testing and Optimizing Angular Applications

Activity 15: Animating the Route Transition Between the Blog Post Page and the View Post Page of the Blogging Application

1. Import the routing module into the app.routing.module file using the following code:

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { BrowserModule } from '@angular/platform-browser';
   ………………..
   imports: [
       BrowserModule,
       BrowserAnimationsModule
     ],

2. Create an animation.ts file using touch, and then import animation classes and define animation properties:

   touch animation.ts

   Here is the code for importing and defining animation classes:

   import {trigger,state,style,animate,transition,query,animateChild,group} from '@angular/animations';
   
   export const slideInAnimation =
     trigger('routeAnimations', [
       transition('HomePage <=> PostPage', [
         style({ position: 'relative' }),
         query(':enter, :leave', [
           style({
             position: 'absolute',
             top...