route transition animations
This commit is contained in:
parent
4baef72144
commit
857754e6e9
|
@ -0,0 +1,85 @@
|
||||||
|
import {
|
||||||
|
trigger,
|
||||||
|
animate,
|
||||||
|
style,
|
||||||
|
group,
|
||||||
|
query,
|
||||||
|
transition,
|
||||||
|
} from '@angular/animations';
|
||||||
|
|
||||||
|
const queryShown = query(':enter, :leave', [
|
||||||
|
style({ position: 'fixed', width: '100%', height: '100%' })
|
||||||
|
], { optional: true });
|
||||||
|
|
||||||
|
const speed = '0.5s';
|
||||||
|
|
||||||
|
export function queryTranslate(direction: string, axis: string, from: number, to: number, zIndex: number = 1000) {
|
||||||
|
return query(':' + direction, [
|
||||||
|
style({ transform: 'translate' + axis + '(' + from + '%)', zIndex: zIndex, boxShadow: '0 3px 2px -2px gray' }),
|
||||||
|
animate(speed + ' ease-in-out', style({ transform: 'translate' + axis + '(' + to + '%)' })),
|
||||||
|
], { optional: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryTranslateX(direction: string, from: number, to: number, zIndex: number = 1000) {
|
||||||
|
return queryTranslate(direction, 'X', from, to, zIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryTranslateY(direction: string, from: number, to: number, zIndex: number = 1000) {
|
||||||
|
return queryTranslate(direction, 'Y', from, to, zIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
const inSlideLeft = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateX('enter', 100, 0),
|
||||||
|
queryTranslateX('leave', 0, -100),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
const outSlideRight = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateX('enter', -100, 0),
|
||||||
|
queryTranslateX('leave', 0, 100),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
const inSlideUp = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateY('enter', 100, 0, 1010),
|
||||||
|
queryTranslateY('leave', 0, 0),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
const outSlideDown = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateY('enter', 0, 0),
|
||||||
|
queryTranslateY('leave', 0, 100, 1010),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
const inSlideDown = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateY('enter', -100, 0, 1010),
|
||||||
|
queryTranslateY('leave', 0, 0),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
const outSlideUp = [
|
||||||
|
queryShown,
|
||||||
|
group([
|
||||||
|
queryTranslateY('enter', 0, 0),
|
||||||
|
queryTranslateY('leave', 0, -100, 1010),
|
||||||
|
]),
|
||||||
|
];
|
||||||
|
|
||||||
|
export const routerTransition = trigger('routerTransition', [
|
||||||
|
transition('home => login', inSlideLeft),
|
||||||
|
transition('login => home', outSlideRight),
|
||||||
|
|
||||||
|
transition('login => hint', inSlideUp),
|
||||||
|
transition('hint => login', outSlideDown),
|
||||||
|
]);
|
|
@ -24,13 +24,13 @@ import { ViewComponent } from './vault/view.component';
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: '', redirectTo: '/tabs/current', pathMatch: 'full' },
|
{ path: '', redirectTo: '/tabs/current', pathMatch: 'full' },
|
||||||
{ path: 'vault', redirectTo: '/tabs/vault', pathMatch: 'full' },
|
{ path: 'vault', redirectTo: '/tabs/vault', pathMatch: 'full' },
|
||||||
{ path: 'home', component: HomeComponent },
|
{ path: 'home', component: HomeComponent, data: { state: 'home' } },
|
||||||
{ path: 'login', component: LoginComponent },
|
{ path: 'login', component: LoginComponent, data: { state: 'login' } },
|
||||||
{ path: 'lock', component: LockComponent },
|
{ path: 'lock', component: LockComponent },
|
||||||
{ path: '2fa', component: TwoFactorComponent },
|
{ path: '2fa', component: TwoFactorComponent },
|
||||||
{ path: '2fa-options', component: TwoFactorOptionsComponent },
|
{ path: '2fa-options', component: TwoFactorOptionsComponent },
|
||||||
{ path: 'register', component: RegisterComponent },
|
{ path: 'register', component: RegisterComponent },
|
||||||
{ path: 'hint', component: HintComponent },
|
{ path: 'hint', component: HintComponent, data: { state: 'hint' } },
|
||||||
{ path: 'environment', component: EnvironmentComponent },
|
{ path: 'environment', component: EnvironmentComponent },
|
||||||
{ path: 'ciphers', component: CiphersComponent },
|
{ path: 'ciphers', component: CiphersComponent },
|
||||||
{ path: 'view-cipher', component: ViewComponent },
|
{ path: 'view-cipher', component: ViewComponent },
|
||||||
|
|
|
@ -23,12 +23,17 @@ import { StorageService } from 'jslib/abstractions/storage.service';
|
||||||
|
|
||||||
import { ConstantsService } from 'jslib/services/constants.service';
|
import { ConstantsService } from 'jslib/services/constants.service';
|
||||||
|
|
||||||
|
import { routerTransition } from './app-routing.animations';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
styles: [],
|
styles: [],
|
||||||
|
animations: [routerTransition],
|
||||||
template: `
|
template: `
|
||||||
<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
|
<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
|
||||||
<router-outlet></router-outlet>`,
|
<main [@routerTransition]="getState(o)">
|
||||||
|
<router-outlet #o="outlet"></router-outlet>
|
||||||
|
</main>`,
|
||||||
})
|
})
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
toasterConfig: ToasterConfig = new ToasterConfig({
|
toasterConfig: ToasterConfig = new ToasterConfig({
|
||||||
|
@ -74,6 +79,10 @@ export class AppComponent implements OnInit {
|
||||||
BrowserApi.messageListener((window as any).bitwardenPopupMainMessageListener);
|
BrowserApi.messageListener((window as any).bitwardenPopupMainMessageListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getState(outlet: any) {
|
||||||
|
return outlet.activatedRouteData.state;
|
||||||
|
}
|
||||||
|
|
||||||
private async recordActivity() {
|
private async recordActivity() {
|
||||||
const now = (new Date()).getTime();
|
const now = (new Date()).getTime();
|
||||||
if (this.lastActivity != null && now - this.lastActivity < 250) {
|
if (this.lastActivity != null && now - this.lastActivity < 250) {
|
||||||
|
|
|
@ -220,6 +220,7 @@ content {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
background-color: $background-color;
|
||||||
|
|
||||||
&.no-header {
|
&.no-header {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
Loading…
Reference in New Issue