ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Fixed animations

Browse Source
This commit is contained in:
ztimson 2019-07-22 13:32:41 -04:00
parent 62dd88989b
commit 8a9d759c41
2 changed files with 20 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/animations.ts
View File

@ -1,67 +1,67 @@
import {animate, state, style, transition, trigger} from "@angular/animations"; import {animate, state, style, transition, trigger} from "@angular/animations";
const defaultTiming = '500ms'; const defaultTiming = '200ms';
export const collapse = (timings: string = defaultTiming) => trigger('collapse', [ export const collapse = trigger('collapse', [
transition(':leave', [ transition(':leave', [
style({height: '*'}), style({height: '*'}),
animate(timings, style({height: '0'})) animate(defaultTiming, style({height: '0'}))
]) ])
]); ]);
export const expand = (timings: string = defaultTiming) => trigger('expand', [ export const expand = trigger('expand', [
transition(':enter', [ transition(':enter', [
style({height: '0'}), style({height: '0'}),
animate(timings, style({height: '*'})) animate(defaultTiming, style({height: '*'}))
]) ])
]); ]);
export const fadeIn = (timings: string = defaultTiming) => trigger('fadeIn', [ export const fadeIn = trigger('fadeIn', [
transition(':enter', [ transition(':enter', [
style({ opacity: 0 }), style({ opacity: 0 }),
animate(timings, style({ opacity: 1 })) animate(defaultTiming, style({ opacity: 1 }))
]) ])
]); ]);
export const fadeOut = (timings: string = defaultTiming) => trigger('fadeOut', [ export const fadeOut = trigger('fadeOut', [
transition(':leave', [ transition(':leave', [
style({ opacity: 1 }), style({ opacity: 1 }),
animate(timings, style({ opacity: 0 })) animate(defaultTiming, style({ opacity: 0 }))
]) ])
]); ]);
export const flyInRight = (timings: string = defaultTiming) => trigger('flyInRight', [ export const flyInRight = trigger('flyInRight', [
transition(':enter', [ transition(':enter', [
style({transform: 'translateX(100%)'}), style({transform: 'translateX(100%)'}),
animate(timings, style({transform: 'translateX(0%)'})) animate(defaultTiming, style({transform: 'translateX(0%)'}))
]) ])
]); ]);
export const flyOutRight = (timings: string = defaultTiming) => trigger('flyOutRight', [ export const flyOutRight = trigger('flyOutRight', [
transition(':leave', [ transition(':leave', [
style({transform: 'translateX(0%)'}), style({transform: 'translateX(0%)'}),
animate(timings, style({transform: 'translateX(100%)'})) animate(defaultTiming, style({transform: 'translateX(100%)'}))
]) ])
]); ]);
export const flyInTop = (timings: string = defaultTiming) => trigger('flyInTop', [ export const flyInTop = trigger('flyInTop', [
transition(':enter', [ transition(':enter', [
style({transform: 'translateY(-100%)'}), style({transform: 'translateY(-100%)'}),
animate(timings, style({transform: 'translateY(0%)'})) animate(defaultTiming, style({transform: 'translateY(0%)'}))
]) ])
]); ]);
export const flyOutTop = (timings: string = defaultTiming) => trigger('flyOutTop', [ export const flyOutTop = trigger('flyOutTop', [
transition(':leave', [ transition(':leave', [
style({transform: 'translateY(0%)'}), style({transform: 'translateY(0%)'}),
animate(timings, style({transform: 'translateY(-100%)'})) animate(defaultTiming, style({transform: 'translateY(-100%)'}))
]) ])
]); ]);
export const rotate = (timings: string = defaultTiming) => trigger('rotate', [ export const rotate = trigger('rotate', [
state('up', style({transform: 'rotate(0deg)'})), state('up', style({transform: 'rotate(0deg)'})),
state('right', style({transform: 'rotate(90deg)'})), state('right', style({transform: 'rotate(90deg)'})),
state('down', style({transform: 'rotate(180deg)'})), state('down', style({transform: 'rotate(180deg)'})),
state('left', style({transform: 'rotate(270deg)'})), state('left', style({transform: 'rotate(270deg)'})),
transition('* => *', [animate(timings)]) transition('* => *', [animate(defaultTiming)])
]); ]);

5
src/app/views/map/map.component.ts
View File

@ -10,14 +10,11 @@ import {flyInRight, flyOutRight} from "../../animations";
declare const google; declare const google;
const flyInRightFast = flyInRight('150ms');
const flyOutRightFast = flyOutRight('150ms');
@Component({ @Component({
selector: 'map', selector: 'map',
templateUrl: 'map.component.html', templateUrl: 'map.component.html',
styleUrls: ['map.component.scss'], styleUrls: ['map.component.scss'],
animations: [flyInRightFast, flyOutRightFast] animations: [flyInRight, flyOutRight]
}) })
export class MapComponent { export class MapComponent {
drawColor: string; drawColor: string;