UNPKG

@proyecto26/animatable-component

Version:

Animate once, use Everywhere! 💫

proyecto26.github.io/animatable-component

proyecto26/animatable-component

34 lines (33 loc) • 1.64 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { ANIMATIONS } from './common'; const ROTATE_OUT = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }, { offset: 1, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' } ]; const ROTATE_OUT_CLOCKWISE = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' }, { offset: 1, opacity: 0, transform: 'rotateZ(-180deg)', transformOrigin: 'center' } ]; const ROTATE_OUT_DOWN_LEFT = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }, { offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'left bottom' } ]; const ROTATE_OUT_DOWN_RIGHT = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }, { offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'right bottom' } ]; const ROTATE_OUT_UP_LEFT = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'left bottom' }, { offset: 1, opacity: 0, transform: 'rotateZ(-45deg)', transformOrigin: 'left bottom' } ]; const ROTATE_OUT_UP_RIGHT = [ { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'right bottom' }, { offset: 1, opacity: 0, transform: 'rotateZ(45deg)', transformOrigin: 'right bottom' } ]; export default { [ANIMATIONS.ROTATE_OUT]: ROTATE_OUT, [ANIMATIONS.ROTATE_OUT_CLOCKWISE]: ROTATE_OUT_CLOCKWISE, [ANIMATIONS.ROTATE_OUT_DOWN_LEFT]: ROTATE_OUT_DOWN_LEFT, [ANIMATIONS.ROTATE_OUT_DOWN_RIGHT]: ROTATE_OUT_DOWN_RIGHT, [ANIMATIONS.ROTATE_OUT_UP_LEFT]: ROTATE_OUT_UP_LEFT, [ANIMATIONS.ROTATE_OUT_UP_RIGHT]: ROTATE_OUT_UP_RIGHT };