diff --git a/client/src/app/shared/animations.ts b/client/src/app/shared/animations.ts index c6fc3365a..c01b9e9ba 100644 --- a/client/src/app/shared/animations.ts +++ b/client/src/app/shared/animations.ts @@ -1,52 +1,4 @@ -import { animate, group, query, stagger, 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 }) - ]) - ]) -]); +import { animate, style, transition, trigger } from '@angular/animations'; const slideIn = [style({ transform: 'translateX(-85%)' }), animate('600ms ease')]; const slideOut = [ diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html index 95bffbf61..a589937a3 100644 --- a/client/src/app/site/site.component.html +++ b/client/src/app/site/site.component.html @@ -149,7 +149,7 @@
-
+
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts index 681ecb6d3..40ca1ffb1 100644 --- a/client/src/app/site/site.component.ts +++ b/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'] })