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

Roter Animation:

Browse Source 
+ animations disabled for child queries (eg. Mail App)
+ New router animations added
+ Router animation option added to config and theme options
+ Disabled delaying fakedb requests
This commit is contained in:
mustafahlvc 2017-08-23 17:28:15 +03:00
parent cc7af0c2e4
commit f1ac166ca6
5 changed files with 286 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -63,7 +63,7 @@ const appRoutes: Routes = [
RouterModule.forRoot(appRoutes),
SharedModule,
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
PerfectScrollbarModule.forRoot(),

205
src/app/core/animations.ts
View File

@ -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({
query('fuse-content > :enter, fuse-content > :leave', [
style({
position: 'absolute',
top : 0,
bottom : 0,
left : 0,
right : 0
})),
query(':enter', style({
transform: 'translateY(100%)',
})
]),
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())
])
]);
}

30
src/app/core/components/theme-options/theme-options.component.html
View File

@ -61,5 +61,35 @@
</div>
</md-list-item>
<md-divider></md-divider>
<h3 md-subheader>Animation:</h3>
<md-list-item>
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<h4>Router Animation</h4>
<md-select [(ngModel)]="fuseSettings.routerAnimation">
<md-option value="none">
None
</md-option>
<md-option value="slideUp">
Slide up
</md-option>
<md-option value="slideDown">
Slide down
</md-option>
<md-option value="slideRight">
Slide right
</md-option>
<md-option value="slideLeft">
Slide left
</md-option>
<md-option value="fadeIn">
Fade in
</md-option>
</md-select>
</div>
</md-list-item>
</md-list>
</div>

3
src/app/core/services/config.service.ts
View File

@ -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'
};
/**

58
src/app/main/content/content.component.ts
View File

@ -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();
}
}