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
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";
const defaultTiming = '500ms';
const defaultTiming = '200ms';
export const collapse = (timings: string = defaultTiming) => trigger('collapse', [
export const collapse = trigger('collapse', [
transition(':leave', [
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', [
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', [
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', [
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', [
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', [
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', [
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', [
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('right', style({transform: 'rotate(90deg)'})),
state('down', style({transform: 'rotate(180deg)'})),
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;
const flyInRightFast = flyInRight('150ms');
const flyOutRightFast = flyOutRight('150ms');
@Component({
selector: 'map',
templateUrl: 'map.component.html',
styleUrls: ['map.component.scss'],
animations: [flyInRightFast, flyOutRightFast]
animations: [flyInRight, flyOutRight]
})
export class MapComponent {
drawColor: string;