feature(theme): add route animation

npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.html

@@ -8,8 +8,12 @@
   </div>
 </nav>
 
-<div style="padding-top: 5rem;" class="container">
-  <router-outlet></router-outlet>
+<div
+  [@routeAnimations]="outlet && outlet.activatedRoute && outlet.activatedRoute.routeConfig.path"
+  style="padding-top: 5rem;"
+  class="container"
+>
+  <router-outlet #outlet="outlet"></router-outlet>
 </div>
 
 <abp-confirmation></abp-confirmation>

npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { slideFromBottom } from '@abp/ng.theme.shared';
 
 @Component({
   selector: ' abp-layout',
   templateUrl: './layout.component.html',
+  animations: [slideFromBottom],
 })
 export class LayoutComponent {
   isCollapsed: boolean = false;

npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts

@@ -0,0 +1 @@
+export * from './slide.animation';

npm/ng-packs/packages/theme-shared/src/lib/animations/slide.animation.ts

@@ -0,0 +1,6 @@
+import { animate, state, style, transition, trigger, query } from '@angular/animations';
+export const slideFromBottom = trigger('routeAnimations', [
+  state('void', style({ 'margin-top': '20px', opacity: '0' })),
+  state('*', style({ 'margin-top': '0px', opacity: '1' })),
+  transition(':enter', [animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' }))]),
+]);

npm/ng-packs/packages/theme-shared/src/public-api.ts

@@ -3,6 +3,7 @@
  */
 
 export * from './lib/theme-shared.module';
+export * from './lib/animations';
 export * from './lib/components';
 export * from './lib/models';
 export * from './lib/services';