Merge pull request #4996 from GabrielInTheWorld/preventLeavingChildsHere

Disables the animations

client/src/app/shared/animations.ts

@@ -1,52 +1,4 @@
-import { animate, group, query, stagger, style, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
-
-const fadeVanish = [
-    style({ transform: 'translateY(0%)', opacity: 1 }),
-    animate(
-        '150ms ease-in-out',
-        style({
-            transform: 'translateY(0%)',
-            opacity: 0
-        })
-    )
-];
-
-// Requires more generic way to trigger parallel animations
-// const fadeAppear = [
-//     style({ transform: 'translateY(0%)', opacity: 0 }),
-//     animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
-// ];
-
-const justEnterDom = [style({ opacity: 0 })];
-
-const fadeMoveIn = [
-    style({ transform: 'translateY(30px)' }),
-    animate('150ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
-];
-
-export const pageTransition = trigger('pageTransition', [
-    transition('* => *', [
-        /** this will avoid the dom-copy-effect */
-        query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
-
-        /** keep the dom clean - let all items "just" enter */
-        query(':enter mat-card', justEnterDom, { optional: true }),
-        query(':enter mat-row', justEnterDom, { optional: true }),
-
-        /** parallel vanishing */
-        group([
-            query(':leave mat-card', fadeVanish, { optional: true }),
-            query(':leave mat-row', fadeVanish, { optional: true })
-        ]),
-
-        /** parallel appearing */
-        group([
-            /** Staggered appearing = "one after another" */
-            query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }),
-            query(':enter mat-row', fadeMoveIn, { optional: true })
-        ])
-    ])
-]);
 
 const slideIn = [style({ transform: 'translateX(-85%)' }), animate('600ms ease')];
 const slideOut = [

client/src/app/site/site.component.html

@@ -149,7 +149,7 @@
             </button>
         </div>
         <div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
-            <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
+            <main>
                 <router-outlet #o="outlet"></router-outlet>
             </main>
         </div>

client/src/app/site/site.component.ts

@@ -9,7 +9,7 @@ import { ActivationEnd, NavigationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { filter } from 'rxjs/operators';
 
-import { navItemAnim, pageTransition } from '../shared/animations';
+import { navItemAnim } from '../shared/animations';
 import { OfflineService } from 'app/core/core-services/offline.service';
 import { OverlayService } from 'app/core/ui-services/overlay.service';
 import { UpdateService } from 'app/core/ui-services/update.service';
@@ -32,7 +32,7 @@ interface RoutingData {
 
 @Component({
     selector: 'os-site',
-    animations: [pageTransition, navItemAnim],
+    animations: [navItemAnim],
     templateUrl: './site.component.html',
     styleUrls: ['./site.component.scss']
 })