diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c1d570fc..e11a6676 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -63,7 +63,7 @@ const appRoutes: Routes = [
RouterModule.forRoot(appRoutes),
SharedModule,
- InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
+ InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
PerfectScrollbarModule.forRoot(),
diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts
index bcad7c27..14825c1e 100644
--- a/src/app/core/animations.ts
+++ b/src/app/core/animations.ts
@@ -70,23 +70,119 @@ export class Animations
transition('* => void', animate('300ms'))
]);
- public static routerTransition = trigger('routerTransition', [
+ public static routerTransitionLeft = trigger('routerTransitionLeft', [
transition('* => *', [
- query(':enter, :leave', style({
- position: 'absolute',
- top : 0,
- bottom : 0,
- left : 0,
- right : 0
- })),
- query(':enter', style({
- transform: 'translateY(100%)',
- opacity : 0
- })),
+ query('fuse-content > :enter, fuse-content > :leave', [
+ style({
+ position: 'absolute',
+ top : 0,
+ bottom : 0,
+ left : 0,
+ right : 0
+ })
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ transform: 'translateX(100%)',
+ opacity : 0
+ })
+ ]),
sequence([
group([
- query(':leave', [
+ query('fuse-content > :leave', [
+ style({
+ transform: 'translateX(0)',
+ opacity : 1
+ }),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateX(-100%)',
+ opacity : 0
+ }))
+ ]),
+ query('fuse-content > :enter', [
+ style({transform: 'translateX(100%)'}),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateX(0%)',
+ opacity : 1
+ }))
+ ])
+ ]),
+ query('fuse-content > :leave', animateChild()),
+ query('fuse-content > :enter', animateChild())
+ ])
+ ])
+ ]);
+
+ public static routerTransitionRight = trigger('routerTransitionRight', [
+
+ transition('* => *', [
+ query('fuse-content > :enter, fuse-content > :leave', [
+ style({
+ position: 'absolute',
+ top : 0,
+ bottom : 0,
+ left : 0,
+ right : 0
+ })
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ transform: 'translateX(-100%)',
+ opacity : 0
+ })
+ ]),
+ sequence([
+ group([
+ query('fuse-content > :leave', [
+ style({
+ transform: 'translateX(0)',
+ opacity : 1
+ }),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateX(100%)',
+ opacity : 0
+ }))
+ ]),
+ query('fuse-content > :enter', [
+ style({transform: 'translateX(-100%)'}),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateX(0%)',
+ opacity : 1
+ }))
+ ])
+ ]),
+ query('fuse-content > :leave', animateChild()),
+ query('fuse-content > :enter', animateChild())
+ ])
+ ])
+ ]);
+
+ public static routerTransitionUp = trigger('routerTransitionUp', [
+
+ transition('* => *', [
+ query('fuse-content > :enter, fuse-content > :leave', [
+ style({
+ position: 'absolute',
+ top : 0,
+ bottom : 0,
+ left : 0,
+ right : 0
+ })
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ transform: 'translateY(100%)',
+ opacity : 0
+ })
+ ]),
+ sequence([
+ group([
+ query('fuse-content > :leave', [
style({
transform: 'translateY(0)',
opacity : 1
@@ -97,7 +193,7 @@ export class Animations
opacity : 0
}))
]),
- query(':enter', [
+ query('fuse-content > :enter', [
style({transform: 'translateY(100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({
@@ -106,9 +202,98 @@ export class Animations
}))
])
]),
- query(':leave', animateChild()),
- query(':enter', animateChild())
+ query('fuse-content > :leave', animateChild()),
+ query('fuse-content > :enter', animateChild())
])
])
]);
+
+ public static routerTransitionDown = trigger('routerTransitionDown', [
+
+ transition('* => *', [
+ query('fuse-content > :enter, fuse-content > :leave', [
+ style({
+ position: 'absolute',
+ top : 0,
+ bottom : 0,
+ left : 0,
+ right : 0
+ })
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ transform: 'translateY(-100%)',
+ opacity : 0
+ })
+ ]),
+ sequence([
+ group([
+ query('fuse-content > :leave', [
+ style({
+ transform: 'translateY(0)',
+ opacity : 1
+ }),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateY(100%)',
+ opacity : 0
+ }))
+ ]),
+ query('fuse-content > :enter', [
+ style({transform: 'translateY(-100%)'}),
+ animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ transform: 'translateY(0%)',
+ opacity : 1
+ }))
+ ])
+ ]),
+ query('fuse-content > :leave', animateChild()),
+ query('fuse-content > :enter', animateChild())
+ ])
+ ])
+ ]);
+
+ public static routerTransitionFade = trigger('routerTransitionFade', [
+
+ transition('* => *', [
+
+ query('fuse-content > :enter, fuse-content > :leave ', [
+ style({
+ position: 'absolute',
+ top : 0,
+ bottom : 0,
+ left : 0,
+ right : 0
+ })
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ opacity: 0
+ })
+ ]),
+ sequence([
+ query('fuse-content > :leave', [
+ style({
+ opacity: 1
+ }),
+ animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ opacity: 0
+ }))
+ ]),
+ query('fuse-content > :enter', [
+ style({
+ opacity: 0
+ }),
+ animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+ style({
+ opacity: 1
+ }))
+ ])
+ ]),
+ query('fuse-content > :enter', animateChild()),
+ query('fuse-content > :leave', animateChild())
+ ])
+ ]);
}
diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html
index 091188bd..6291aba0 100644
--- a/src/app/core/components/theme-options/theme-options.component.html
+++ b/src/app/core/components/theme-options/theme-options.component.html
@@ -61,5 +61,35 @@
+
+
+ Animation:
+
+
+
+
Router Animation
+
+
+ None
+
+
+ Slide up
+
+
+ Slide down
+
+
+ Slide right
+
+
+ Slide left
+
+
+ Fade in
+
+
+
+
+
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 56efc302..795b31dd 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -30,7 +30,8 @@ export class FuseConfigService
navbar : 'md-fuse-dark-500-bg',
footer : 'md-fuse-dark-800-bg'
},
- customScrollbars: true
+ customScrollbars: true,
+ routerAnimation : 'fadeIn'
};
/**
diff --git a/src/app/main/content/content.component.ts b/src/app/main/content/content.component.ts
index fce6e17b..3f70d99c 100644
--- a/src/app/main/content/content.component.ts
+++ b/src/app/main/content/content.component.ts
@@ -1,32 +1,78 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Animations } from '../../core/animations';
+import { FuseConfigService } from '../../core/services/config.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
selector : 'fuse-content',
templateUrl: './content.component.html',
styleUrls : ['./content.component.scss'],
- animations : [Animations.routerTransition]
+ animations : [
+ Animations.routerTransitionUp,
+ Animations.routerTransitionDown,
+ Animations.routerTransitionRight,
+ Animations.routerTransitionLeft,
+ Animations.routerTransitionFade
+ ]
})
-export class FuseContentComponent implements OnInit
+export class FuseContentComponent implements OnInit, OnDestroy
{
- @HostBinding('@routerTransition') routeAnimationState = false;
+ onSettingsChanged: Subscription;
+ fuseSettings: any;
+
+ @HostBinding('@routerTransitionUp') routeAnimationUp = false;
+ @HostBinding('@routerTransitionDown') routeAnimationDown = false;
+ @HostBinding('@routerTransitionRight') routeAnimationRight = false;
+ @HostBinding('@routerTransitionLeft') routeAnimationLeft = false;
+ @HostBinding('@routerTransitionFade') routeAnimationFade = false;
constructor(
private router: Router,
- private activatedRoute: ActivatedRoute
+ private activatedRoute: ActivatedRoute,
+ private fuseConfig: FuseConfigService
)
{
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.subscribe((event) => {
- this.routeAnimationState = !this.routeAnimationState;
+ switch ( this.fuseSettings.routerAnimation )
+ {
+ case 'fadeIn':
+ this.routeAnimationFade = !this.routeAnimationFade;
+ break;
+ case 'slideUp':
+ this.routeAnimationUp = !this.routeAnimationUp;
+ break;
+ case 'slideDown':
+ this.routeAnimationDown = !this.routeAnimationDown;
+ break;
+ case 'slideRight':
+ this.routeAnimationRight = !this.routeAnimationRight;
+ break;
+ case 'slideLeft':
+ this.routeAnimationLeft = !this.routeAnimationLeft;
+ break;
+ }
});
+
+ this.onSettingsChanged =
+ this.fuseConfig.onSettingsChanged
+ .subscribe(
+ (newSettings) => {
+ this.fuseSettings = newSettings;
+ }
+ );
}
ngOnInit()
{
}
+
+ ngOnDestroy()
+ {
+ this.onSettingsChanged.unsubscribe();
+ }
}