purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed router animations after the layout changes

Browse Source 
Don't reset the router animation on navigation change
This commit is contained in:
Sercan Yemen 2018-06-09 14:58:45 +03:00
parent 6cc7d03430
commit 1c8cc35693
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/@fuse/animations/index.ts
View File

@ -187,10 +187,14 @@ export const fuseAnimations = [
transition('* => void', animate('300ms ease-in')) transition('* => void', animate('300ms ease-in'))
]), ]),
// -----------------------------------------------------------------------------------------------------
// @ Router animations
// -----------------------------------------------------------------------------------------------------
trigger('routerTransitionLeft', [ trigger('routerTransitionLeft', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('content > :enter, content > :leave', [
style({ style({
position: 'absolute', position: 'absolute',
top : 0, top : 0,
@ -199,7 +203,7 @@ export const fuseAnimations = [
right : 0 right : 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
transform: 'translateX(100%)', transform: 'translateX(100%)',
opacity : 0 opacity : 0
@ -207,7 +211,7 @@ export const fuseAnimations = [
], {optional: true}), ], {optional: true}),
sequence([ sequence([
group([ group([
query('fuse-content > :leave', [ query('content > :leave', [
style({ style({
transform: 'translateX(0)', transform: 'translateX(0)',
opacity : 1 opacity : 1
@ -218,7 +222,7 @@ export const fuseAnimations = [
opacity : 0 opacity : 0
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({transform: 'translateX(100%)'}), style({transform: 'translateX(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
@ -227,8 +231,8 @@ export const fuseAnimations = [
})) }))
], {optional: true}) ], {optional: true})
]), ]),
query('fuse-content > :leave', animateChild(), {optional: true}), query('content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}) query('content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]), ]),
@ -236,7 +240,7 @@ export const fuseAnimations = [
trigger('routerTransitionRight', [ trigger('routerTransitionRight', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('content > :enter, content > :leave', [
style({ style({
position: 'absolute', position: 'absolute',
top : 0, top : 0,
@ -245,7 +249,7 @@ export const fuseAnimations = [
right : 0 right : 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
transform: 'translateX(-100%)', transform: 'translateX(-100%)',
opacity : 0 opacity : 0
@ -253,7 +257,7 @@ export const fuseAnimations = [
], {optional: true}), ], {optional: true}),
sequence([ sequence([
group([ group([
query('fuse-content > :leave', [ query('content > :leave', [
style({ style({
transform: 'translateX(0)', transform: 'translateX(0)',
opacity : 1 opacity : 1
@ -264,7 +268,7 @@ export const fuseAnimations = [
opacity : 0 opacity : 0
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({transform: 'translateX(-100%)'}), style({transform: 'translateX(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
@ -273,8 +277,8 @@ export const fuseAnimations = [
})) }))
], {optional: true}) ], {optional: true})
]), ]),
query('fuse-content > :leave', animateChild(), {optional: true}), query('content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}) query('content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]), ]),
@ -282,7 +286,7 @@ export const fuseAnimations = [
trigger('routerTransitionUp', [ trigger('routerTransitionUp', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('content > :enter, content > :leave', [
style({ style({
position: 'absolute', position: 'absolute',
top : 0, top : 0,
@ -291,14 +295,14 @@ export const fuseAnimations = [
right : 0 right : 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
transform: 'translateY(100%)', transform: 'translateY(100%)',
opacity : 0 opacity : 0
}) })
], {optional: true}), ], {optional: true}),
group([ group([
query('fuse-content > :leave', [ query('content > :leave', [
style({ style({
transform: 'translateY(0)', transform: 'translateY(0)',
opacity : 1 opacity : 1
@ -309,7 +313,7 @@ export const fuseAnimations = [
opacity : 0 opacity : 0
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({transform: 'translateY(100%)'}), style({transform: 'translateY(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
@ -318,15 +322,15 @@ export const fuseAnimations = [
})) }))
], {optional: true}) ], {optional: true})
]), ]),
query('fuse-content > :leave', animateChild(), {optional: true}), query('content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}) query('content > :enter', animateChild(), {optional: true})
]) ])
]), ]),
trigger('routerTransitionDown', [ trigger('routerTransitionDown', [
transition('* => *', [ transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [ query('content > :enter, content > :leave', [
style({ style({
position: 'absolute', position: 'absolute',
top : 0, top : 0,
@ -335,7 +339,7 @@ export const fuseAnimations = [
right : 0 right : 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
transform: 'translateY(-100%)', transform: 'translateY(-100%)',
opacity : 0 opacity : 0
@ -343,7 +347,7 @@ export const fuseAnimations = [
], {optional: true}), ], {optional: true}),
sequence([ sequence([
group([ group([
query('fuse-content > :leave', [ query('content > :leave', [
style({ style({
transform: 'translateY(0)', transform: 'translateY(0)',
opacity : 1 opacity : 1
@ -354,7 +358,7 @@ export const fuseAnimations = [
opacity : 0 opacity : 0
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({transform: 'translateY(-100%)'}), style({transform: 'translateY(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)', animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({ style({
@ -363,8 +367,8 @@ export const fuseAnimations = [
})) }))
], {optional: true}) ], {optional: true})
]), ]),
query('fuse-content > :leave', animateChild(), {optional: true}), query('content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}) query('content > :enter', animateChild(), {optional: true})
]) ])
]) ])
]), ]),
@ -373,7 +377,7 @@ export const fuseAnimations = [
transition('* => *', group([ transition('* => *', group([
query('fuse-content > :enter, fuse-content > :leave ', [ query('content > :enter, content > :leave ', [
style({ style({
position: 'absolute', position: 'absolute',
top : 0, top : 0,
@ -383,12 +387,12 @@ export const fuseAnimations = [
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
opacity: 0 opacity: 0
}) })
], {optional: true}), ], {optional: true}),
query('fuse-content > :leave', [ query('content > :leave', [
style({ style({
opacity: 1 opacity: 1
}), }),
@ -397,7 +401,7 @@ export const fuseAnimations = [
opacity: 0 opacity: 0
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', [ query('content > :enter', [
style({ style({
opacity: 0 opacity: 0
}), }),
@ -406,8 +410,8 @@ export const fuseAnimations = [
opacity: 1 opacity: 1
})) }))
], {optional: true}), ], {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}), query('content > :enter', animateChild(), {optional: true}),
query('fuse-content > :leave', animateChild(), {optional: true}) query('content > :leave', animateChild(), {optional: true})
])) ]))
]) ])
]; ];

9
src/@fuse/services/config.service.ts
View File

@ -98,7 +98,14 @@ export class FuseConfigService
.subscribe(() => { .subscribe(() => {
if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) ) if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) )
{ {
this._configSubject.next(_.cloneDeep(this._defaultConfig)); // Clone the default config
const config = _.cloneDeep(this._defaultConfig);
// Don't reset the router animation
config.routerAnimation = this._configSubject.getValue().routerAnimation;
// Set the config
this._configSubject.next(config);
} }
}); });
} }

1
src/app/layout/components/content/content.component.scss
View File

@ -1,4 +1,5 @@
content { content {
position: relative;
display:flex; display:flex;
z-index: 1; z-index: 1;
flex: 1 0 auto; flex: 1 0 auto;