Disables the animations
- No animations prevent leaving some html-elements on the site, until the routing-event has finished.
This commit is contained in:
parent
cdfaf1f313
commit
8dc359dffb
@ -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 = [
|
||||
|
@ -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>
|
||||
|
@ -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']
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user