@proyecto26/animatable-component
Version:
Animate once, use Everywhere! 💫
119 lines (118 loc) • 7.16 kB
JavaScript
import { ANIMATIONS } from './common';
const ROTATE_90_DEFAULT = {
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
fillMode: 'both',
transformOrigin: 'center center'
};
const ROTATE_90_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)' })
];
const ROTATE_90_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)' })
];
const ROTATE_90_TOP_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'top' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: 'top' })
];
const ROTATE_90_TOP_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'top' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: 'top' })
];
const ROTATE_90_TR_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'top right' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: 'top right' })
];
const ROTATE_90_TR_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'top right' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: 'top right' })
];
const ROTATE_90_RIGHT_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'right' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: 'right' })
];
const ROTATE_90_RIGHT_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'right' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: 'right' })
];
const ROTATE_90_BR_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '100% 100%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: '100% 100%' })
];
const ROTATE_90_BR_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '100% 100%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: '100% 100%' })
];
const ROTATE_90_BOTTOM_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'bottom' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: 'bottom' })
];
const ROTATE_90_BOTTOM_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'bottom' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: 'bottom' })
];
const ROTATE_90_BL_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '0% 100%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: '0% 100%' })
];
const ROTATE_90_BL_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '0% 100%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: '0% 100%' })
];
const ROTATE_90_LEFT_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'left' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: 'left' })
];
const ROTATE_90_LEFT_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: 'left' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: 'left' })
];
const ROTATE_90_TL_CW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '0% 0%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(90deg)', transformOrigin: '0% 0%' })
];
const ROTATE_90_TL_CCW = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotate(0)', transformOrigin: '0% 0%' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotate(-90deg)', transformOrigin: '0% 0%' })
];
const ROTATE_90_HORIZONTAL_FWD = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotateX(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotateX(90deg)' })
];
const ROTATE_90_HORIZONTAL_BCK = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotateX(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotateX(-90deg)' })
];
const ROTATE_90_VERTICAL_FWD = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotateY(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotateY(90deg)' })
];
const ROTATE_90_VERTICAL_BCK = [
Object.assign(Object.assign({ offset: 0 }, ROTATE_90_DEFAULT), { transform: 'rotateY(0)' }),
Object.assign(Object.assign({ offset: 1 }, ROTATE_90_DEFAULT), { transform: 'rotateY(-90deg)' })
];
export default {
[ANIMATIONS.ROTATE_90_CW]: ROTATE_90_CW,
[ANIMATIONS.ROTATE_90_CCW]: ROTATE_90_CCW,
[ANIMATIONS.ROTATE_90_TOP_CW]: ROTATE_90_TOP_CW,
[ANIMATIONS.ROTATE_90_TOP_CCW]: ROTATE_90_TOP_CCW,
[ANIMATIONS.ROTATE_90_TR_CW]: ROTATE_90_TR_CW,
[ANIMATIONS.ROTATE_90_TR_CCW]: ROTATE_90_TR_CCW,
[ANIMATIONS.ROTATE_90_RIGHT_CW]: ROTATE_90_RIGHT_CW,
[ANIMATIONS.ROTATE_90_RIGHT_CCW]: ROTATE_90_RIGHT_CCW,
[ANIMATIONS.ROTATE_90_BR_CW]: ROTATE_90_BR_CW,
[ANIMATIONS.ROTATE_90_BR_CCW]: ROTATE_90_BR_CCW,
[ANIMATIONS.ROTATE_90_BOTTOM_CW]: ROTATE_90_BOTTOM_CW,
[ANIMATIONS.ROTATE_90_BOTTOM_CCW]: ROTATE_90_BOTTOM_CCW,
[ANIMATIONS.ROTATE_90_BL_CW]: ROTATE_90_BL_CW,
[ANIMATIONS.ROTATE_90_BL_CCW]: ROTATE_90_BL_CCW,
[ANIMATIONS.ROTATE_90_LEFT_CW]: ROTATE_90_LEFT_CW,
[ANIMATIONS.ROTATE_90_LEFT_CCW]: ROTATE_90_LEFT_CCW,
[ANIMATIONS.ROTATE_90_TL_CW]: ROTATE_90_TL_CW,
[ANIMATIONS.ROTATE_90_TL_CCW]: ROTATE_90_TL_CCW,
[ANIMATIONS.ROTATE_90_HORIZONTAL_FWD]: ROTATE_90_HORIZONTAL_FWD,
[ANIMATIONS.ROTATE_90_HORIZONTAL_BCK]: ROTATE_90_HORIZONTAL_BCK,
[ANIMATIONS.ROTATE_90_VERTICAL_FWD]: ROTATE_90_VERTICAL_FWD,
[ANIMATIONS.ROTATE_90_VERTICAL_BCK]: ROTATE_90_VERTICAL_BCK
};