purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +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'))
]),
// -----------------------------------------------------------------------------------------------------
// @ Router animations
// -----------------------------------------------------------------------------------------------------
trigger('routerTransitionLeft', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top : 0,
@ -199,7 +203,7 @@ export const fuseAnimations = [
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
transform: 'translateX(100%)',
opacity : 0
@ -207,7 +211,7 @@ export const fuseAnimations = [
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
query('content > :leave', [
style({
transform: 'translateX(0)',
opacity : 1
@ -218,7 +222,7 @@ export const fuseAnimations = [
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({transform: 'translateX(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
@ -227,8 +231,8 @@ export const fuseAnimations = [
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
query('content > :leave', animateChild(), {optional: true}),
query('content > :enter', animateChild(), {optional: true})
])
])
]),
@ -236,7 +240,7 @@ export const fuseAnimations = [
trigger('routerTransitionRight', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top : 0,
@ -245,7 +249,7 @@ export const fuseAnimations = [
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
transform: 'translateX(-100%)',
opacity : 0
@ -253,7 +257,7 @@ export const fuseAnimations = [
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
query('content > :leave', [
style({
transform: 'translateX(0)',
opacity : 1
@ -264,7 +268,7 @@ export const fuseAnimations = [
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({transform: 'translateX(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
@ -273,8 +277,8 @@ export const fuseAnimations = [
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
query('content > :leave', animateChild(), {optional: true}),
query('content > :enter', animateChild(), {optional: true})
])
])
]),
@ -282,7 +286,7 @@ export const fuseAnimations = [
trigger('routerTransitionUp', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top : 0,
@ -291,14 +295,14 @@ export const fuseAnimations = [
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
transform: 'translateY(100%)',
opacity : 0
})
], {optional: true}),
group([
query('fuse-content > :leave', [
query('content > :leave', [
style({
transform: 'translateY(0)',
opacity : 1
@ -309,7 +313,7 @@ export const fuseAnimations = [
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({transform: 'translateY(100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
@ -318,15 +322,15 @@ export const fuseAnimations = [
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
query('content > :leave', animateChild(), {optional: true}),
query('content > :enter', animateChild(), {optional: true})
])
]),
trigger('routerTransitionDown', [
transition('* => *', [
query('fuse-content > :enter, fuse-content > :leave', [
query('content > :enter, content > :leave', [
style({
position: 'absolute',
top : 0,
@ -335,7 +339,7 @@ export const fuseAnimations = [
right : 0
})
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
transform: 'translateY(-100%)',
opacity : 0
@ -343,7 +347,7 @@ export const fuseAnimations = [
], {optional: true}),
sequence([
group([
query('fuse-content > :leave', [
query('content > :leave', [
style({
transform: 'translateY(0)',
opacity : 1
@ -354,7 +358,7 @@ export const fuseAnimations = [
opacity : 0
}))
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({transform: 'translateY(-100%)'}),
animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
style({
@ -363,8 +367,8 @@ export const fuseAnimations = [
}))
], {optional: true})
]),
query('fuse-content > :leave', animateChild(), {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true})
query('content > :leave', animateChild(), {optional: true}),
query('content > :enter', animateChild(), {optional: true})
])
])
]),
@ -373,7 +377,7 @@ export const fuseAnimations = [
transition('* => *', group([
query('fuse-content > :enter, fuse-content > :leave ', [
query('content > :enter, content > :leave ', [
style({
position: 'absolute',
top : 0,
@ -383,12 +387,12 @@ export const fuseAnimations = [
})
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
opacity: 0
})
], {optional: true}),
query('fuse-content > :leave', [
query('content > :leave', [
style({
opacity: 1
}),
@ -397,7 +401,7 @@ export const fuseAnimations = [
opacity: 0
}))
], {optional: true}),
query('fuse-content > :enter', [
query('content > :enter', [
style({
opacity: 0
}),
@ -406,8 +410,8 @@ export const fuseAnimations = [
opacity: 1
}))
], {optional: true}),
query('fuse-content > :enter', animateChild(), {optional: true}),
query('fuse-content > :leave', animateChild(), {optional: true})
query('content > :enter', 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(() => {
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 {
position: relative;
display:flex;
z-index: 1;
flex: 1 0 auto;