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), RouterModule.forRoot(appRoutes),
SharedModule, SharedModule,
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}), InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
PerfectScrollbarModule.forRoot(), PerfectScrollbarModule.forRoot(),

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

@ -70,23 +70,119 @@ export class Animations
transition('* => void', animate('300ms')) transition('* => void', animate('300ms'))
]); ]);
public static routerTransition = trigger('routerTransition', [ public static routerTransitionLeft = trigger('routerTransitionLeft', [
transition('* => *', [ transition('* => *', [
query(':enter, :leave', style({ query('fuse-content > :enter, fuse-content > :leave', [
position: 'absolute', style({
top : 0, position: 'absolute',
bottom : 0, top : 0,
left : 0, bottom : 0,
right : 0 left : 0,
})), right : 0
query(':enter', style({ })
transform: 'translateY(100%)', ]),
opacity : 0 query('fuse-content > :enter', [
})), style({
transform: 'translateX(100%)',
opacity : 0
})
]),
sequence([ sequence([
group([ 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({ style({
transform: 'translateY(0)', transform: 'translateY(0)',
opacity : 1 opacity : 1
@ -97,7 +193,7 @@ export class Animations
opacity : 0 opacity : 0
})) }))
]), ]),
query(':enter', [ query('fuse-content > :enter', [
style({transform: 'translateY(100%)'}), style({transform: 'translateY(100%)'}),
animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
style({ style({
@ -106,9 +202,98 @@ export class Animations
})) }))
]) ])
]), ]),
query(':leave', animateChild()), query('fuse-content > :leave', animateChild()),
query(':enter', 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> </div>
</md-list-item> </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> </md-list>
</div> </div>

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

@ -30,7 +30,8 @@ export class FuseConfigService
navbar : 'md-fuse-dark-500-bg', navbar : 'md-fuse-dark-500-bg',
footer : 'md-fuse-dark-800-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 { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Animations } from '../../core/animations'; import { Animations } from '../../core/animations';
import { FuseConfigService } from '../../core/services/config.service';
import { Subscription } from 'rxjs/Subscription';
@Component({ @Component({
selector : 'fuse-content', selector : 'fuse-content',
templateUrl: './content.component.html', templateUrl: './content.component.html',
styleUrls : ['./content.component.scss'], 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( constructor(
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute private activatedRoute: ActivatedRoute,
private fuseConfig: FuseConfigService
) )
{ {
this.router.events this.router.events
.filter((event) => event instanceof NavigationEnd) .filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute) .map(() => this.activatedRoute)
.subscribe((event) => { .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() ngOnInit()
{ {
} }
ngOnDestroy()
{
this.onSettingsChanged.unsubscribe();
}
} }