@qrsln/utils
Version:
25 lines (24 loc) • 4.63 kB
JavaScript
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
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 }),
]);
export const Shake = trigger('Shake', [
state('start', style({ transform: 'scale(1)' })),
state('end', style({ transform: 'scale(1)' })),
transition('start <=> end', animate('1000ms ease-in', keyframeShake)),
]);
export const ShakeAuto = trigger('ShakeAuto', [transition('void => *', animate('1000ms ease-in', keyframeShake))]);
/* usage
shakeIt = 'start'; // start end
<div [@ShakeIt]="shakeIt"></div>
<div [@ShakeItAuto]></div>
*/
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2hha2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy91dGlscy9BbmltYXRpb25zL3NyYy9Bbmltcy9TaGFrZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUUxRixNQUFNLGFBQWEsR0FBRyxTQUFTLENBQUM7SUFDOUIsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUMsQ0FBQztJQUMxRCxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBQyxDQUFDO0lBQ3pELEtBQUssQ0FBQyxFQUFDLFNBQVMsRUFBRSx5QkFBeUIsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFDLENBQUM7SUFDMUQsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUMsQ0FBQztJQUN6RCxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBQyxDQUFDO0lBQzFELEtBQUssQ0FBQyxFQUFDLFNBQVMsRUFBRSx3QkFBd0IsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFDLENBQUM7SUFDekQsS0FBSyxDQUFDLEVBQUMsU0FBUyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUMsQ0FBQztJQUMxRCxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBQyxDQUFDO0lBQ3pELEtBQUssQ0FBQyxFQUFDLFNBQVMsRUFBRSx5QkFBeUIsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFDLENBQUM7Q0FDM0QsQ0FBQyxDQUFDO0FBRUgsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUFHLE9BQU8sQ0FBQyxPQUFPLEVBQUU7SUFDcEMsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBQyxTQUFTLEVBQUUsVUFBVSxFQUFDLENBQUMsQ0FBQztJQUM5QyxLQUFLLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxFQUFDLFNBQVMsRUFBRSxVQUFVLEVBQUMsQ0FBQyxDQUFDO0lBQzVDLFVBQVUsQ0FBQyxlQUFlLEVBQUUsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGFBQWEsQ0FBQyxDQUFDO0NBQ3RFLENBQUMsQ0FBQztBQUNILE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxPQUFPLENBQUMsV0FBVyxFQUFFLENBQUMsVUFBVSxDQUFDLFdBQVcsRUFBRSxPQUFPLENBQUMsZ0JBQWdCLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7QUFFbkg7Ozs7O0VBS0UiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2FuaW1hdGUsIGtleWZyYW1lcywgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuXHJcbmNvbnN0IGtleWZyYW1lU2hha2UgPSBrZXlmcmFtZXMoW1xyXG4gIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgtMXB4LCAwLCAwKScsIG9mZnNldDogMC4xfSksXHJcbiAgc3R5bGUoe3RyYW5zZm9ybTogJ3RyYW5zbGF0ZTNkKDJweCwgMCwgMCknLCBvZmZzZXQ6IDAuMn0pLFxyXG4gIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgtNHB4LCAwLCAwKScsIG9mZnNldDogMC4zfSksXHJcbiAgc3R5bGUoe3RyYW5zZm9ybTogJ3RyYW5zbGF0ZTNkKDRweCwgMCwgMCknLCBvZmZzZXQ6IDAuNH0pLFxyXG4gIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgtNHB4LCAwLCAwKScsIG9mZnNldDogMC41fSksXHJcbiAgc3R5bGUoe3RyYW5zZm9ybTogJ3RyYW5zbGF0ZTNkKDRweCwgMCwgMCknLCBvZmZzZXQ6IDAuNn0pLFxyXG4gIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgtNHB4LCAwLCAwKScsIG9mZnNldDogMC43fSksXHJcbiAgc3R5bGUoe3RyYW5zZm9ybTogJ3RyYW5zbGF0ZTNkKDJweCwgMCwgMCknLCBvZmZzZXQ6IDAuOH0pLFxyXG4gIHN0eWxlKHt0cmFuc2Zvcm06ICd0cmFuc2xhdGUzZCgtMXB4LCAwLCAwKScsIG9mZnNldDogMC45fSksXHJcbl0pO1xyXG5cclxuZXhwb3J0IGNvbnN0IFNoYWtlID0gdHJpZ2dlcignU2hha2UnLCBbXHJcbiAgc3RhdGUoJ3N0YXJ0Jywgc3R5bGUoe3RyYW5zZm9ybTogJ3NjYWxlKDEpJ30pKSxcclxuICBzdGF0ZSgnZW5kJywgc3R5bGUoe3RyYW5zZm9ybTogJ3NjYWxlKDEpJ30pKSxcclxuICB0cmFuc2l0aW9uKCdzdGFydCA8PT4gZW5kJywgYW5pbWF0ZSgnMTAwMG1zIGVhc2UtaW4nLCBrZXlmcmFtZVNoYWtlKSksXHJcbl0pO1xyXG5leHBvcnQgY29uc3QgU2hha2VBdXRvID0gdHJpZ2dlcignU2hha2VBdXRvJywgW3RyYW5zaXRpb24oJ3ZvaWQgPT4gKicsIGFuaW1hdGUoJzEwMDBtcyBlYXNlLWluJywga2V5ZnJhbWVTaGFrZSkpXSk7XHJcblxyXG4vKiB1c2FnZVxyXG5zaGFrZUl0ID0gJ3N0YXJ0JzsgLy8gc3RhcnQgZW5kXHJcbjxkaXYgW0BTaGFrZUl0XT1cInNoYWtlSXRcIj48L2Rpdj5cclxuPGRpdiBbQFNoYWtlSXRBdXRvXT48L2Rpdj5cclxuXHJcbiovXHJcbiJdfQ==