@qrsln/utils
Version:
74 lines (57 loc) • 2.51 kB
JavaScript
import { trigger, transition, useAnimation, animation, style, animate, state, keyframes } from '@angular/animations';
const FadeInOut = trigger('FadeInOut', [
transition('void => *', useAnimation(animation([style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]))),
transition('* => void', useAnimation(animation(animate('200ms', style({ opacity: 0 })))))
]);
/* usage
<div [@FadeInOut]></div>
*/
const FlyInOut = trigger('FlyInOut', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(500)]),
transition('* => void', [animate(500, style({ transform: 'translateX(100%)' }))])
]);
/* usage
<div [@FlyInOut]="'in'"></div>
*/
const Overlay = trigger('Overlay', [
state('void', style({ transform: 'scale(0)', opacity: 0 })),
transition('void <=> *', [style({ opacity: 1 }), animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')])
]);
/* usage
<div [@Overlay]="'enter'"></div>
*/
const keyframeShake = keyframes([
style({ transform: 'translate3d(-1px, 0, 0)', offset: 0.1 }),
style({ transform: 'translate3d(2px, 0, 0)', offset: 0.2 }),
style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.3 }),
style({ transform: 'translate3d(4px, 0, 0)', offset: 0.4 }),
style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.5 }),
style({ transform: 'translate3d(4px, 0, 0)', offset: 0.6 }),
style({ transform: 'translate3d(-4px, 0, 0)', offset: 0.7 }),
style({ transform: 'translate3d(2px, 0, 0)', offset: 0.8 }),
style({ transform: 'translate3d(-1px, 0, 0)', offset: 0.9 }),
]);
const Shake = trigger('Shake', [
state('start', style({ transform: 'scale(1)' })),
state('end', style({ transform: 'scale(1)' })),
transition('start <=> end', animate('1000ms ease-in', keyframeShake)),
]);
const ShakeAuto = trigger('ShakeAuto', [transition('void => *', animate('1000ms ease-in', keyframeShake))]);
/* usage
shakeIt = 'start'; // start end
<div [@ShakeIt]="shakeIt"></div>
<div [@ShakeItAuto]></div>
*/
const ShrinkOut = trigger('ShrinkOut', [
state('in', style({ height: '*' })),
transition('* => void', [style({ height: '*' }), animate(250, style({ height: 0 }))])
]);
/* usage
<div [@ShrinkOut]="'in'"></div>
*/
/**
* Generated bundle index. Do not edit.
*/
export { FadeInOut, FlyInOut, Overlay, Shake, ShakeAuto, ShrinkOut };
//# sourceMappingURL=qrsln-utils-Animations.mjs.map